글꼴 파일 크기를 크게 줄일 수 있는 새로운 글꼴 사양
이 도움말에서는 가변 글꼴의 정의, 가변 글꼴이 제공하는 이점, 작업에 가변 글꼴을 사용하는 방법을 살펴봅니다. 먼저 웹에서 서체가 작동하는 방식과 다양한 글꼴이 가져오는 혁신을 살펴보겠습니다.
브라우저 호환성
2020년 5월부터 가변 글꼴이 대부분의 브라우저에서 지원됩니다. 가변 글꼴을 사용할 수 있나요? 및 대체 옵션을 참고하세요.
소개
개발자는 글꼴과 서체라는 용어를 혼용하여 사용합니다. 하지만 차이점이 있습니다. 서체는 다양한 서체 기술에 존재할 수 있는 기본 시각적 디자인이고, 글꼴은 이러한 구현 중 하나로 디지털 파일 형식입니다. 즉, 서체는 보이는 것이고 글꼴은 사용하는 것입니다.
종종 간과되는 또 다른 개념은 스타일과 패밀리의 구분입니다. 스타일은 Bold Italic과 같은 단일의 특정 서체이고, 모음은 스타일의 전체 집합입니다.
가변 글꼴 이전에는 각 스타일이 별도의 글꼴 파일로 구현되었습니다. 가변 글꼴을 사용하면 모든 스타일을 단일 파일에 포함할 수 있습니다.
디자이너 및 개발자의 과제
디자이너가 인쇄 프로젝트를 만들 때는 페이지 레이아웃의 실제 크기, 사용할 수 있는 색상 수 (사용할 인쇄기의 종류에 따라 결정됨)와 같은 몇 가지 제약 조건이 있습니다. 하지만 서체 스타일은 원하는 만큼 사용할 수 있습니다. 즉, 인쇄 매체의 서체는 종종 풍부하고 세련되어 독서 경험이 매우 즐겁습니다. 훌륭한 잡지를 즐겁게 탐색했던 마지막 순간을 떠올려 보세요.
웹 디자이너와 개발자는 인쇄 디자이너와는 다른 제약조건이 있으며, 그중 중요한 것은 디자인과 관련된 대역폭 비용입니다. 그러나 더 풍부한 서체 환경을 제공하려면 비용이 들기 때문에 이 문제가 해결되지 않았습니다. 기존 웹 글꼴을 사용하면 디자인에 사용되는 각 스타일에 대해 사용자가 별도의 글꼴 파일을 다운로드해야 하므로 지연 시간과 페이지 렌더링 시간이 늘어납니다. 일반 및 굵은 스타일과 기울임꼴에 해당하는 스타일만 포함해도 글꼴 데이터가 500KB 이상이 될 수 있습니다. 이는 글꼴이 렌더링되는 방식, 사용해야 하는 대체 패턴 또는 FOIT 및 FOUT과 같은 바람직하지 않은 부작용을 처리하기 전입니다.
많은 글꼴 모음은 Thin에서 Black에 이르는 다양한 두께, 좁은 너비와 넓은 너비, 다양한 스타일 세부정보, 크기별 디자인 (큰 텍스트 크기 또는 작은 텍스트 크기에 최적화됨)을 제공합니다. 모든 스타일 (또는 스타일 조합)에 대해 새 글꼴 파일을 로드해야 하므로 많은 웹 개발자는 이러한 기능을 사용하지 않음으로써 사용자의 독서 환경을 저하시키고 있습니다.
가변 글꼴의 구성
가변 글꼴은 스타일을 단일 파일로 패키징하여 이러한 문제를 해결합니다.
중앙 또는 '기본' 스타일(일반적으로 '일반')부터 시작합니다. 이 스타일은 일반 텍스트에 가장 적합한 가장 일반적인 두께와 너비를 가진 직립형 로마 디자인입니다. 그런 다음 '축'이라고 하는 연속 범위의 다른 스타일에 연결됩니다. 가장 일반적인 축은 두께로, 기본 스타일을 굵은 스타일에 연결할 수 있습니다. 개별 스타일은 축을 따라 배치할 수 있으며, 이는 변수 글꼴의 '인스턴스'라고 합니다. 일부 인스턴스는 글꼴 개발자가 이름을 지정합니다. 예를 들어 두께 축 위치 600은 SemiBold라고 합니다.
가변 글꼴 Roboto Flex에는 Weight 축에 세 가지 스타일이 있습니다. 일반 스타일이 가운데에 있고 축의 양 끝에 두 가지 스타일이 있습니다. 하나는 더 밝고 다른 하나는 더 어둡습니다. 다음 중 900개의 인스턴스 중에서 선택할 수 있습니다.
글꼴 개발자는 다양한 축 세트를 제공할 수 있습니다. 모두 동일한 기본 스타일을 공유하므로 결합할 수 있습니다. Roboto의 너비 축에는 세 가지 스타일이 있습니다. 일반은 축의 중앙에 있고 더 좁고 더 넓은 두 가지 스타일은 각 끝에 있습니다. 이는 일반 스타일의 모든 너비를 제공하고, 굵기 축과 결합하여 모든 굵기에 대한 모든 너비를 제공합니다.
즉, 수천 개의 스타일이 있다는 뜻입니다. 지나치게 많은 것처럼 보일 수 있지만, 이러한 다양한 서체 스타일을 사용하면 독서 환경의 품질을 크게 향상할 수 있습니다. 성능 저하가 없다면 웹 개발자는 원하는 만큼 스타일을 사용할 수 있습니다. 디자인에 따라 다릅니다.
기울임꼴
가변 글꼴에서 기울임꼴이 처리되는 방식은 흥미롭습니다. 두 가지 접근 방식이 있기 때문입니다. Helvetica 또는 Roboto와 같은 서체에는 보간과 호환되는 윤곽선이 있으므로 로만과 이탤릭 스타일 간에 보간할 수 있으며 기울기 축을 사용하여 로만에서 이탤릭으로 전환할 수 있습니다.
Garamond, Baskerville, Bodoni와 같은 다른 서체에는 보간과 호환되지 않는 로만 및 이탤릭 글리프 윤곽선이 있습니다. 예를 들어 일반적으로 로마자 소문자 'n'을 정의하는 윤곽선은 기울임꼴 소문자 'n'을 정의하는 데 사용되는 윤곽선과 일치하지 않습니다. 한 윤곽선을 다른 윤곽선으로 보간하는 대신 기울임꼴 축이 로마자 윤곽선에서 기울임꼴 윤곽선으로 전환됩니다.
기울임꼴로 전환한 후에는 문자 집합이 동일해야 하듯이 사용자가 사용할 수 있는 축도 로마자와 동일해야 합니다.
글리프 대체 기능은 개별 글리프에 표시되며 가변 글꼴의 디자인 공간 어디서나 사용할 수 있습니다. 예를 들어 세로 막대가 두 개인 달러 기호 디자인은 큰 포인트 크기에서 가장 잘 작동하지만 작은 포인트 크기에서는 막대가 하나만 있는 디자인이 더 좋습니다. 글리프를 렌더링하는 데 사용할 수 있는 픽셀이 적으면 두 막대 디자인을 읽을 수 없게 될 수 있습니다. 이를 방지하기 위해, 기울기 축과 마찬가지로 서체 디자이너가 결정한 지점에서 시각적 크기 축을 따라 글리프가 다른 글리프로 대체될 수 있습니다.
요약하자면 윤곽선이 허용하는 경우 서체 디자이너는 다차원 디자인 공간에서 다양한 스타일 간에 보간하는 글꼴을 만들 수 있습니다. 이를 통해 서체를 세부적으로 제어하고 강력한 기능을 활용할 수 있습니다.
축 정의
글꼴의 알려진 예측 가능한 특징인 두께, 너비, 광학 크기, 경사, 기울임꼴을 제어하는 5개의 등록된 축이 있습니다. 그 외에도 글꼴에는 맞춤 축이 포함될 수 있습니다. 이를 통해 서체 디자이너가 원하는 글꼴의 모든 디자인 측면(예: 세리프 크기, 스와시 길이, 상단 획의 높이 또는 i의 점 크기)을 제어할 수 있습니다.
축이 동일한 지형지물을 제어할 수 있지만 다른 값을 사용할 수 있습니다. 예를 들어 Oswald 및 Hepta Slab 가변 글꼴에는 사용할 수 있는 축이 하나(두께)이지만 범위는 다릅니다. Oswald는 가변으로 업그레이드되기 전과 동일한 범위(200~700)를 가지지만 Hepta Slab은 1에서 900까지의 극단적인 헤어라인 두께를 갖습니다.
등록된 5개의 축에는 CSS에서 값을 설정하는 데 사용되는 4자리 소문자 태그가 있습니다.
| 축 이름 및 CSS 값 | |
|---|---|
| 무게 |
wght
|
| 너비 |
wdth
|
| 빈정 상함 |
slnt
|
| 광학 크기 |
opsz
|
| 기울임꼴 |
ital
|
글꼴 개발자가 가변 글꼴에서 사용할 수 있는 축과 각 축에서 가질 수 있는 값을 정의하므로 각 글꼴에서 제공하는 기능을 파악하는 것이 중요합니다. 글꼴 문서에 이 정보가 제공되어 있거나 Wakamai Fondue와 같은 도구를 사용하여 글꼴을 검사할 수 있습니다.
사용 사례 및 이점
축 값을 설정하는 것은 개인 취향과 서체 권장사항을 적용하는 것으로 귀결됩니다. 새로운 기술의 위험은 오용될 수 있다는 점입니다. 지나치게 예술적이거나 탐색적인 설정은 실제 텍스트의 가독성을 떨어뜨릴 수도 있습니다. 제목의 경우 다양한 축을 탐색하여 멋진 예술적 디자인을 만드는 것은 흥미롭지만 본문의 경우 텍스트를 읽을 수 없게 될 위험이 있습니다.
흥미로운 표현
예술적 표현의 한 가지 좋은 예는 맨디 마이클의 서체 탐색인 Decovar입니다.
위 샘플의 작동 예시와 소스 코드는 여기에서 확인할 수 있습니다.
애니메이션
가변 글꼴로 캐릭터 애니메이션을 살펴볼 수도 있습니다. 위는 Zycon 서체와 함께 사용되는 다양한 축의 예입니다. Axis Praxis의 애니메이션 예시를 실시간으로 확인하세요.
Anicons는 Material Design 아이콘을 기반으로 한 전 세계 최초의 애니메이션 색상 아이콘 글꼴입니다. Anicons는 두 가지 최신 글꼴 기술인 가변 글꼴과 컬러 글꼴을 결합한 실험입니다.
Finesse
Roboto Flex 및 Amstelvar는 일련의 '파라메트릭 축'을 제공합니다. 이 축에서 문자는 4가지 기본적인 형태 측면(검은색 또는 양수 도형, 흰색 또는 음수 도형, x 및 y 크기)으로 분해됩니다. 기본 색상을 다른 색상과 혼합하여 조정할 수 있는 것처럼 이러한 4가지 측면을 사용하여 다른 축을 미세 조정할 수 있습니다.
Amstelvar의 XTRA 축을 사용하면 위에 표시된 대로 '백분율' 값을 조정할 수 있습니다. 반대 방향으로 약간의 XTRA를 사용하면 단어의 너비가 균등해집니다.
CSS의 가변 글꼴
가변 글꼴 파일 로드
가변 글꼴은 기존의 정적 웹 글꼴과 동일한 @font-face 메커니즘을 통해 로드되지만 두 가지 새로운 개선사항이 있습니다.
@font-face {
font-family: 'Roboto Flex';
src: url('RobotoFlex-VF.woff2') format('woff2-variations');
src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
font-weight: 100 1000;
font-stretch: 25% 151%;
}
1. 소스 형식: 브라우저가 가변 글꼴을 지원하지 않는 경우 브라우저가 글꼴을 다운로드하지 않도록 하려면 format 및 tech 설명을 추가합니다. 향후 문법(format('woff2') tech('variations'))에 한 번, 지원 중단되었지만 브라우저에서 지원되는 문법 (format('woff2-variations'))에 한 번 추가합니다. 브라우저가 가변 글꼴을 지원하고 향후 문법을 지원하는 경우 첫 번째 선언을 사용합니다. 변수 글꼴과 현재 문법을 지원하는 경우 두 번째 선언을 사용합니다. 둘 다 동일한 글꼴 파일을 가리킵니다.
2. 스타일 범위: font-weight 및 font-stretch에 두 개의 값이 제공됩니다. 이제 브라우저에 이 글꼴이 제공하는 특정 두께 (예: font-weight: 500;)를 알려주는 대신 글꼴에서 지원하는 두께의 범위를 제공합니다. Roboto Flex의 경우 굵기 축의 범위는 100~1,000이고 CSS는 축 범위를 font-weight 스타일 속성에 직접 매핑합니다. @font-face에 범위를 지정하면 이 범위를 벗어난 모든 값은 가장 가까운 유효한 값으로 '제한'됩니다. 너비 축 범위는 font-stretch 속성과 동일한 방식으로 매핑됩니다.
Google Fonts API를 사용하는 경우 이 작업이 모두 처리됩니다. CSS에 적절한 소스 형식과 범위가 포함될 뿐만 아니라 Google Fonts는 변형 글꼴이 지원되지 않는 경우 정적 대체 글꼴도 전송합니다.
가중치 및 너비 사용
현재 CSS에서 안정적으로 설정할 수 있는 축은 font-weight를 통한 wght 축과 font-stretch를 통한 wdth 축입니다.
기존에는 font-weight를 키워드(light, bold)로 설정하거나 100~900 사이의 숫자 값(100단위)으로 설정했습니다. 가변 글꼴을 사용하면 글꼴의 너비 범위 내에서 임의의 값을 설정할 수 있습니다.
.kinda-light {
font-weight: 125;
}
.super-heavy {
font-weight: 1000;
}
마찬가지로 키워드 (condensed, ultra-expanded) 또는 비율 값으로 font-stretch를 설정할 수 있습니다.
.kinda-narrow {
font-stretch: 33.3%;
}
.super-wide {
font-stretch: 151%;
}
기울임꼴 및 기울어진 획 사용
ital 축은 일반 스타일과 기울임꼴 스타일이 모두 포함된 글꼴을 위한 것입니다. 축은 켜기/끄기 스위치입니다. 값 0는 꺼져 있으며 일반 스타일을 표시하고 값 1는 기울임꼴을 표시합니다. 다른 축과 달리 전환이 없습니다. 0.5 값은 '반각 기울임꼴'을 제공하지 않습니다.
slnt 축은 새로운 스타일이 아니라 일반 스타일을 기울이는 것이라는 점에서 기울임꼴과 다릅니다. 기본값은 0이며 이는 기본 직립 글꼴 모양을 의미합니다. Roboto Flex의 최대 기울기는 -10도입니다. 즉, 0에서 -10으로 진행하면 글자가 오른쪽으로 기울어집니다.
font-style 속성을 통해 이러한 축을 설정하는 것이 직관적이지만 2020년 4월 현재 정확한 방법은 아직 연구 중입니다. 따라서 지금은 이를 맞춤 축으로 취급하고 font-variation-settings를 통해 설정해야 합니다.
i, em, .italic {
/* Should be font-style: italic; */
font-variation-settings: 'ital' 1;
}
.slanted {
/* Should be font-style: oblique 10deg; */
font-variation-settings: 'slnt' 10;
}
광학 크기 사용
서체는 매우 작게 (12px 각주) 또는 매우 크게 (80px 제목) 렌더링될 수 있습니다. 글꼴은 크기에 더 잘 맞게 글자 모양을 변경하여 이러한 크기 변경에 응답할 수 있습니다. 작은 크기는 세부적인 디테일이 없어도 좋을 수 있지만, 큰 크기는 더 많은 디테일과 더 얇은 획을 사용하면 좋습니다.
이 축에 새로운 CSS 속성 font-optical-sizing이 도입되었습니다. 기본적으로 auto로 설정되어 브라우저가 font-size를 기반으로 축 값을 설정합니다. 즉, 브라우저가 최적의 광학 크기를 자동으로 선택합니다. 이 기능을 사용 중지하려면 font-optical-sizing를 none로 설정하면 됩니다.
글꼴 크기와 일치하지 않는 시각적 크기를 의도적으로 사용하려는 경우 opsz 축에 맞춤 값을 설정할 수도 있습니다. 다음 CSS를 사용하면 텍스트가 큰 크기로 표시되지만 8pt로 인쇄된 것처럼 광학 크기로 표시됩니다.
.small-yet-large {
font-size: 100px;
font-variation-settings: 'opsz' 8;
}
맞춤 축 사용
등록된 축과 달리 맞춤 축은 기존 CSS 속성에 매핑되지 않으므로 항상 font-variation-settings를 통해 설정해야 합니다.
등록된 축과 구분하기 위해 맞춤 축의 태그는 항상 대문자로 표시됩니다.
Roboto Flex는 몇 가지 맞춤 축을 제공하며 가장 중요한 것은 Grade (GRAD)입니다. Grade 축은 너비를 변경하지 않고 글꼴의 두께를 변경하므로 줄바꿈이 변경되지 않는 점이 흥미롭습니다. 등급 축을 조정하면 전체 너비에 영향을 미치는 두께 축을 변경한 다음 전체 두께에 영향을 미치는 너비 축을 변경하는 번거로움을 피할 수 있습니다.
GRAD는 맞춤 축이므로 Roboto Flex에서 범위는 -200~150입니다.
font-variation-settings로 이 문제를 해결해야 합니다.
.grade-light {
font-variation-settings: `GRAD` -200;
}
.grade-normal {
font-variation-settings: `GRAD` 0;
}
.grade-heavy {
font-variation-settings: `GRAD` 150;
}
Google Fonts의 가변 글꼴
Google Fonts는 변수 글꼴로 카탈로그를 확장하고 있으며 새로운 글꼴을 정기적으로 추가하고 있습니다.
이 인터페이스는 현재 글꼴에서 단일 인스턴스를 선택하는 것을 목표로 합니다. 원하는 변형을 선택하고 '이 스타일 선택'을 클릭하면 Google Fonts에서 CSS 및 글꼴을 가져오는 <link> 요소에 추가됩니다.
사용 가능한 모든 축 또는 값 범위를 사용하려면 Google Fonts API의 URL을 수동으로 작성해야 합니다. 변수 글꼴 개요에는 모든 축과 값이 나열됩니다.
Google 가변 글꼴 링크 도구를 사용하면 전체 가변 글꼴의 최신 URL도 확인할 수 있습니다.
Font-variation-settings 상속
등록된 모든 축은 곧 기존 CSS 속성을 통해 지원되지만 당분간은 대체로 font-variation-settings를 사용해야 할 수 있습니다. 글꼴에 맞춤 축이 있는 경우 font-variation-settings도 필요합니다.
하지만 font-variation-settings에는 약간의 문제가 있습니다. 명시적으로 설정하지 않은 모든 속성은 자동으로 기본값으로 재설정됩니다.
이전에 설정된 값은 상속되지 않습니다. 즉, 다음은 예상대로 작동하지 않습니다.
<span class="slanted grade-light">
I should be slanted and have a light grade
</span>
먼저 브라우저는 .slanted 클래스의 font-variation-settings: 'slnt' 10를 적용합니다. 그러면 .grade-light 클래스의 font-variation-settings: 'GRAD' -200이 적용됩니다. 하지만 이렇게 하면 slnt가 기본값 0으로 재설정됩니다. 결과는 밝은 그레이드의 텍스트가 되지만 기울어지지는 않습니다.
다행히 CSS 변수를 사용하여 이 문제를 해결할 수 있습니다.
/* Set the default values */
:root {
--slnt: 0;
--GRAD: 0;
}
/* Change value for these elements and their children */
.slanted {
--slnt: 10;
}
.grade-light {
--grad: -200;
}
.grade-normal {
--grad: 0;
}
.grade-heavy {
--grad: 150;
}
/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}
CSS 변수는 계단식 방식으로 적용되므로 요소 (또는 상위 요소 중 하나)가 slnt를 10로 설정하면 GRAD를 다른 값으로 설정해도 이 값이 유지됩니다. 이 기법에 관한 자세한 설명은 글꼴 모음 상속 수정을 참고하세요.
CSS 변수 애니메이션은 설계상 작동하지 않으므로 다음과 같은 방법은 작동하지 않습니다.
@keyframes width-animation {
from { --wdth: 25; }
to { --wdth: 151; }
}
이러한 애니메이션은 font-variation-settings에서 직접 실행되어야 합니다.
실적 향상
OpenType 가변 글꼴을 사용하면 한 글꼴 파일에 여러 서체 변형을 저장할 수 있습니다. Monotype은 12개의 입력 글꼴을 결합하여 3가지 너비에 걸쳐 이탤릭 및 로만 스타일에서 모두 8가지 두께를 생성하는 실험을 진행했습니다. 단일 변형 글꼴 파일에 48개의 개별 글꼴을 저장하면 파일 크기가 88% 감소했습니다.
그러나 Roboto Regular와 같은 단일 글꼴만 사용하고 있다면 축이 많은 가변 글꼴로 전환해도 글꼴 크기가 크게 증가하지 않을 수 있습니다. 언제나 그렇듯이 사용 사례에 따라 다릅니다.
반대로 설정 간에 글꼴을 애니메이션 처리하면 성능 문제가 발생할 수 있습니다. 브라우저의 가변 글꼴 지원이 더 성숙해지면 이 문제가 개선되지만 현재 화면에 있는 글꼴만 애니메이션 처리하면 문제를 어느 정도 줄일 수 있습니다. Dinamo의 이 편리한 스니펫은 vf-animation 클래스가 있는 요소가 화면에 없을 때 애니메이션을 일시중지합니다.
var observer = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
// Pause/Play the animation
if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
else entry.target.style.animationPlayState = "paused"
});
});
var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });
글꼴이 사용자 상호작용에 반응하는 경우 입력 이벤트를 제한하거나 debounce하는 것이 좋습니다. 이렇게 하면 브라우저가 이전 인스턴스와 거의 차이가 없어 인간의 눈에는 차이가 보이지 않는 가변 글꼴 인스턴스를 렌더링하지 않습니다.
Google Fonts를 사용하는 경우 Google 글꼴이 호스팅되는 도메인인 https://fonts.gstatic.com에 미리 연결하는 것이 좋습니다. 이렇게 하면 브라우저가 CSS에서 글꼴을 발견할 때 글꼴을 가져올 위치를 조기에 알 수 있습니다.
<link rel="preconnect" href="https://fonts.gstatic.com" />
이 도움말은 다른 CDN에도 적용됩니다. 브라우저에서 네트워크 연결을 설정할수록 더 빨리 글꼴을 다운로드할 수 있습니다.
가장 빠른 Google Fonts에서 Google Fonts 로드에 관한 성능 도움말을 자세히 알아보세요.
대체 및 브라우저 지원
모든 최신 브라우저는 가변 글꼴을 지원합니다. 이전 브라우저를 지원해야 하는 경우 정적 글꼴로 사이트를 빌드하고 가변 글꼴을 점진적 개선으로 사용할 수 있습니다.
/* Set up Roboto for old browsers, only regular + bold */
@supports not (font-variation-settings: normal) {
@font-face {
font-family: Roboto;
src: url('Roboto-Regular.woff2');
font-weight: normal;
}
@font-face {
font-family: Roboto;
src: url('Roboto-Bold.woff2');
font-weight: bold;
}
body {
font-family: Roboto;
}
.super-bold {
font-weight: bold;
}
}
/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
@font-face {
font-family: 'Roboto';
src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
url('RobotoFlex-VF.woff2') format('woff2-variations');
font-weight: 100 1000;
font-stretch: 25% 151%;
}
.super-bold {
font-weight: 1000;
}
}
이전 브라우저의 경우 .super-bold 클래스가 있는 텍스트는 사용 가능한 유일한 굵은 글꼴이므로 일반 굵은 글꼴로 렌더링됩니다. 가변 글꼴이 지원되는 경우 가장 무거운 두께인 1, 000을 실제로 사용할 수 있습니다.
@supports 규칙은 Internet Explorer에서 지원되지 않으므로 이 브라우저에는 스타일이 표시되지 않습니다. 이 문제가 발생하면 언제든지 구식 해킹 중 하나를 사용하여 관련성 높은 이전 브라우저를 타겟팅할 수 있습니다.
Google Fonts API를 사용하면 방문자의 브라우저에 적절한 글꼴을 로드할 수 있습니다. 다음과 같이 두께 범위가 200~700인 Oswald 글꼴을 요청한다고 가정해 보겠습니다.
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">
가변 글꼴을 처리할 수 있는 최신 브라우저는 가변 글꼴을 가져오며 200~700 사이의 모든 가중치를 사용할 수 있습니다. 이전 브라우저에는 모든 두께에 대해 개별 정적 글꼴이 제공됩니다. 이 경우 가중치 200용 글꼴 파일 1개, 가중치 300용 글꼴 파일 1개 등 6개의 글꼴 파일이 다운로드됩니다.
감사합니다.
이 도움말은 다음과 같은 분들의 도움으로 작성되었습니다.
- Google의 UX 디자이너 겸 디자인 옹호자인 Mustafa Kurtuldu
- Kabisa의 UX 디자이너/개발자 및 서체 전문가인 Roel Nieskens
- 데이브 크로스랜드, Google Fonts 프로그램 관리자
- Font Bureau의 서체 디자이너 겸 서체 제작자 데이비드 벨로우
- axis-praxis.org 개발자 로렌스 페니
- variablefonts.dev 개발자 맨디 마이클