Google Fonts는 이제 v2 API 업데이트에서 가변 글꼴을 완전히 지원합니다. 이제 단일 글꼴과 여러 글꼴 모음을 모두 호출하는 방법과 축 범위입니다. 가변 글꼴을 자세히 살펴보려면 양방향 삽화 브로셔 TypeNetwork의 David Berlow가 맡았습니다
새로운 소식
모든 것이 다음과 같이 새로운 기본 URL로 시작합니다.
https://fonts.googleapis.com/css2
각 그룹 내에서 스타일을 지정하는 문법은 다음을 설명하기 위해 변경되었습니다. 가변 글꼴 '디자인 공간'이 있습니다.
빠른 시작 가이드
이 HTML을 파일에 복사하여 붙여넣습니다.
<html>
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Crimson+Pro">
<style>
body {
font-family: 'Crimson Pro', serif;
font-size: 48px;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
</body>
</html>
브라우저를 사용하여 파일을 열면 페이지가 ' 'Web Beautiful'이라는 표현이 포함됩니다.
여러 가족
여러 계열을 요청하려면 각 가족의 family= 매개변수를 지정합니다.
예를 들어 Crimson Pro 및 Literata:
https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata
이 HTML을 파일에 복사하여 붙여넣습니다.
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Crimson+Pro&family=Literata">
<style>
body {
font-size: 48px;
}
div:nth-child(1) {
font-family: 'Crimson Pro', serif;
}
div:nth-child(2) {
font-family: 'Literata’, serif;
}
</style>
</head>
<body>
<div>Making the Web Beautiful!</div>
<div>Making the Web Beautiful!</div>
</body>
</html>
브라우저를 사용하여 파일을 열면 페이지에서 먼저 Crimson Pro에서 Literata로 'Making the Web Beautiful(아름다운 웹 만들기)'라는 텍스트를 렌더링해야 합니다.
축 범위
가변 글꼴은 종종 추가 속성 없이 연속적인 범위의 스타일을 제공합니다. 지연 시간을 최소화합니다 이는 반응형 디자인과 관련이 있습니다. 이 역동적인 서체는 연속적인 범위의 스타일을 사용하여 가중치를 100~900으로 설정하고 이에 따라 가중치를 변경하여 사용할 수 있습니다.
가변 글꼴 축의 범위를 요청하려면 두 값을 ..와 결합합니다.
| 글꼴 | 요청 |
|---|---|
크림슨 프로[wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@200..900 |
크림슨 프로 기울임꼴[wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@1,200..900 |
크림슨 프로 볼드 기울임꼴 및 [wght 200-900] |
https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,200..900;1,700 |
개별 스타일(예: 체중)
스타일을 지정하지 않으면 API가 기본 스타일을 제공합니다. 요청한 가족입니다. 특정 가중치 등 개별 스타일을 요청하려면 글꼴 모음 이름 뒤에 콜론 (:)을 추가하고 그 뒤에 축 목록을 추가합니다. 알파벳 순서의 속성 키워드, @ 기호, 하나 이상의 목록 값을 정의합니다.
다음 예는 이를 실제로 보여줍니다.
| 글꼴 | 요청 |
|---|---|
| Crimson Pro (기본) | https://fonts.googleapis.com/css2?family=Crimson+Pro |
| 크림슨 프로 볼드 | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@700 |
| 크림슨 프로 일반 및 굵게 | https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@400;700 |
| 크림슨 프로 볼드 & 굵은 기울임꼴 | https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,700;1,700 |
Google 글꼴에는 각 글꼴 모음에 사용할 수 있는 모든 스타일이 나열됩니다.
기본 스타일
요청에서 축의 위치 또는 범위를 지정하지 않는 경우 기본값은 position이 사용됩니다. 기울임꼴 축의 기본 위치는 0 (일반)이고 가중치 축의 기본값은 400 (일반)입니다.
기본 위치가 포함되지 않은 축이 있는 패밀리의 경우, 해당 축의 위치를 지정하지 않으면 실패합니다. 예를 들어 가중치 축이 500~900인 경우 가중치 위치는 지정합니다.
비표준 가중치
정적 글꼴의 경우 두께 스타일은 일반적으로 100의 배수로 지정됩니다. 300, 400, 700). 가변 글꼴은 표준 두께와 중간 가중치가 있습니다. 중간 가중치를 렌더링하는 방법은 다음과 같습니다.
https://fonts.googleapis.com/css2?family=Crimson+Pro:wght@450
지연 시간 및 파일 크기 최적화
사용 중인 스타일을 정확하게 선택합니다. API는 요청된 스타일을 제공합니다. 사용할 수 있습니다. 사용하지 않는 스타일을 요청하면 사용자가 필요한 것보다 더 많은 글꼴 데이터를 다운로드하여 지연 시간이 늘어납니다. 3개의 특정 가중치가 있는 경우, 요청에서 개별 스타일로 지정합니다. 만약 연속된 가중치 범위를 사용하려면 요청에 해당 가중치 범위를 지정합니다.
글꼴 표시 사용
font-display
속성을 사용하면 글꼴이 계속 로드되고 있거나
사용할 수 없습니다. 기본 auto 이외의 값을 지정하는 것은 다음과 같습니다.
일반적으로 적절합니다
원하는 값을 display 매개변수에 전달합니다.
https://fonts.googleapis.com/css2?family=Crimson+Pro&display=swap
글꼴 요청 최적화
사이트나 애플리케이션에서 웹 글꼴을 사용하고자 할 때 어떤 글자가 필요할지 미리 알 수 있습니다. 이러한 문제는 주로 웹 글꼴을 로고 또는 제목에 사용할 수 있습니다.
이 경우 글꼴에 text= 값을 지정하는 것이 좋습니다.
요청 URL을 지정합니다. 이렇게 하면 Google Fonts가
요청할 수 있습니다 이렇게 하면 글꼴 파일의 크기를 최대
90%
이 기능을 사용하려면 text=를 API 요청에 추가하기만 하면 됩니다. 예를 들어
블로그 제목에 Inconsolata만 사용하고 있다면
자체를 text=의 값으로 사용합니다. 이 요청은 다음과 같이 표시됩니다.
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello
모든 쿼리 문자열과 마찬가지로 값을 URL 인코딩해야 합니다.
https://fonts.googleapis.com/css2?family=Comfortaa&text=Hello%20World
이 기능은 국제 글꼴에서도 작동하므로 UTF-8을 지정할 수 있습니다. 있습니다. 예를 들어 ¡Hola!는 다음과 같이 표현됩니다.
https://fonts.googleapis.com/css2?family=Comfortaa&text=%c2%a1Hola!
'text=' 매개변수는 한 번만 지정할 수 있습니다. 적용됩니다. 모든 가족에게 전달할 수 있습니다. 필요한 경우 별도의 API 요청을 사용하세요. 텍스트를 최적화할 수 있습니다.
API URL 구성
엄격성
일반적으로 업데이트된 CSS API는 더 많이 허용되어야 합니다.
일반 가이드라인:
- 축을 알파벳순으로 나열 (
en-US언어) - 축 값 그룹 (튜플)은 숫자로 정렬해야 합니다.
- 튜플은 겹치거나 터치해서는 안 됩니다 (예:
wght400..500 및 500..600).
API URL 사양
/css2?family=<spec>[&family=<spec>...][&text=<text>][&display=<display>]
spec: <family_name>[:<axis_tag_list>@<axis_tuple_list>]
family_name: 글꼴 모음의 이름
axis_tag_list: <axis>[,<axis>...] // Sorted alphabetically (en-US locale)
axis: 축 태그입니다. 예: ital님, wdth님, wght님
axis_tuple_list: <axis_tuple>[;<axis_tuple>...]
axis_tuple: <value>[,<value>...] // Same length as axis_tag_list
value: <range> | <ph type="x-smartling-placeholder"><float></ph>
range: <float>..<float>
float: 해당 축의 범위 내에 있는 값
text: 요청된 서체로 표시될 텍스트입니다.
display: auto | block | swap | fallback | optional
이전 브라우저 지원
가변 글꼴을 지원하지 않는 브라우저는 디자인을 있습니다. caniuse에서 브라우저의 가변 글꼴 지원을 확인합니다.
점진적 개선을 실천함으로써
이러한 이전 브라우저에서 예상치 못한 동작을 방지할 수 있습니다. @supports 사용
가변 글꼴 기능을 제어할 수 있습니다.
이 예에서는 마르카지 텍스트의 가중치 450을 사용하고 싶지만 변수가 나오면 일반 (가중치 400) 또는 중간 (가중치 500)으로 돌아갑니다. 글꼴 기능은 지원되지 않습니다.
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Markazi+Text:wght@450" />
<style>
* {
font-family: 'Markazi Text';
font-weight: 400;
}
@supports (font-variation-settings: "wght" 450) {
* {
font-family: 'Markazi Text';
font-weight: 450;
}
}
</style>
CSS 요청 Markazi+Text:wght@450는 다음을 지원하는 클라이언트에 가중치 450을 전송합니다.
가변 글꼴과 가중치 400 및 500을 그렇지 않은 글꼴과 비교해 볼 수 있습니다. 일반적으로
요청 범위 주변의 대체 값을 기존 브라우저에서 사용할 수 있습니다.
| 축 | 대체 |
|---|---|
ital |
0, 1 |
wght |
100, 200, 300, 400, 500, 600, 700, 800, 900 |
다음 예는 일부 브라우저에서 기존 브라우저에서 사용할 수 있는 스타일을 보여줍니다. 서로 다른 요청을 처리할 수 있습니다
| 요청 | 기존 브라우저에서 사용할 수 있는 스타일 |
|---|---|
ital@0 |
ital@0 |
wght@500 |
wght@500 |
wght@432 |
wght@400;500 |
wght@440..560 |
wght@400;500;600 |
사용 가능한 가변 글꼴
v2 API에서 사용할 수 있는 가변 글꼴에 대한 표는 여기에서 확인할 수 있습니다.