Google 글꼴에서 가변 글꼴을 최대한 활용

나는 재귀 Sans & Mono Font 가족 (환상적인 팀과 함께)을 개발하는 데 몇 년을 보냈으며 마침내 Google 글꼴에서 사용할 수 있습니다!

즉시 사용하고 싶습니까? Google Fonts의 완전한 재귀 변수 글꼴 패밀리에 대한 임베드 코드는 다음과 같습니다 (그러나 최적의 유연성과 성능을 위해서는 참조하십시오!).

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,%5Bemail%C2%A0protected%5D,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code>

재귀는 KABK Typmedia에서 내 타입 디자인 마스터의 논문으로 시작되었습니다. 나중에, 내 파운드리 인 Arrow Type은 Google Fonts에 의해 개방형 소스 Ofl 글꼴로 재귀를 완성하고 출시하기 위해 의뢰되었습니다.

Recursive.Design에서 재귀 및 기능을 탐색하십시오.

Recursive는 웹 사이트 및 코드를위한 다목적 글꼴 가족으로 개발자와 디자이너에게 현대적인 미학과 최첨단 글꼴 기술의 혼합을 제공합니다.

분명히하자 : 가변 글꼴에는 단일 파일 내에 다양한 스타일이 포함되어있어 사용자가 스타일을 유동적으로 선택할 수 있습니다. 이 범위는 가변 축 이라고하며 무게, 너비, 광학 크기, 경사 등과 같은 매개 변수를 나타냅니다. Recursive를 사용하면 "모노에서 산에 이르기까지" "모노 스패스 성"및 "캐주얼"(선형에서 브러시 스타일로)을 제어 할 수 있습니다. 각 글꼴 패밀리는 여러 축을 가질 수 있으며 주요 설계 고려 사항입니다.

Google Fonts는 가변 글꼴을 추가했지만 많은 (재귀 포함)는 기본 인터페이스 쇼보다 훨씬 더 스타일 옵션을 제공합니다. 사용 편의성을 위해 Google Fonts는 주로 "무게"축을 보여주는 디스플레이를 단순화합니다. 그러나 이것은 Recursive의 64 개의 사전 설정 스타일과 5 개의 가변 축을 숨 깁니다. Google Fonts 페이지에는 8 개의 스타일과 1 개의 축이 표시되지만 Recursive는 실제로 훨씬 더 많은 것을 제공합니다.

재귀는 4 개의 "하위 패밀리"로 나눌 수 있습니다.

• SANS LINEAR : 표준 비례 SANS-SERIF 글꼴 (Google 글꼴에 표시).
• Sans Casual : 비례적인 "브러시 캐주얼"글꼴.
• 모노 선형 : 표준 모노 스페이스 글꼴.
• 모노 캐주얼 : 모노 스페이스 "브러시 캐주얼"글꼴.

이것을 시각화하는 것은 그것을 설명하는 것보다 쉽습니다. 두 개의 테이블 (하나는 Sans 용, 하나는 Mono 용)은 64 개의 이름의 인스턴스를 보여줍니다 (여기에는 Brevity가 표시되지 않음). Google Fonts 인터페이스에는 8 개, 중량 축을 표시합니다.

Google Fonts의 다양한 사용자 기반을 고려할 때이 가중치 전용 접근 방식은 이해할 수 있지만 글꼴의 잠재력을 제한합니다. Google Fonts API는 솔루션을 제공합니다.

가변 글꼴과 효율성을 이해합니다

웹 개발자는 대형 JPEG에 서비스를 제공하지 않는다는 것을 알고 있습니다. 유사한 원칙은 글꼴에 적용됩니다. 문자 하위 집합 및 Woff2 압축 사용은 파일 크기를 줄입니다.

가변 글꼴은 비디오 파일과 같습니다. 특정 값으로 트리밍하거나 "고정"할 수있는 범위 (변수 축)가 포함되어 파일 크기가 줄어 듭니다. 비디오와 달리 글꼴은 벡터 모양을 사용합니다. 가변 글꼴에는 여러 "소스 위치"(키 프레임)가 있습니다. 스타일은 이러한 위치 (DELTAS) 사이를 수학적으로 보간하여 생성됩니다. 가변 글꼴을 다듬는 것은 불필요한 델타를 제거하는 것을 의미합니다.

예를 들어, Recursive의 캐주얼 축은 "선형"과 "캐주얼"글자 사이를 보간합니다. Ampersand Glyph 애니메이션 (여기에는 표시되지 않음)이이를 보여줍니다.

각 추가 축은 일반적으로 도면 수를 두 배로 늘립니다. Google Fonts API를 사용하면 필요한 축 만 선택하여 파일 크기가 작습니다.

가변 축 태그

축 약어는 4 글자 태그 (Microsoft 정의 축의 소문자, 맞춤 축의 대문자)입니다. 5 개의 표준 축이 있습니다.

• wght - 무게
• wdth - 너비
• opsz - 광학 크기
• ital - 이탈리아
• slnt - 경사

Recursive는 3 가지 사용자 정의 축 ( MONO , CASL , CRSV )과 wght 및 slnt 사용합니다.

Google Fonts API

Google Fonts 인터페이스는 Google Fonts API를 호출하는 URL을 생성합니다. 이 URL에는 부품이 있습니다.

1. API URL ( https://fonts.googleapis.com/css2 )
2. 글꼴 패밀리 매개 변수
3. font-display 속성

재귀 (sans linear)의 일반 무게를 사용하려면 다음을 사용하십시오.

 <code>@import url('https://fonts.googleapis.com/css2?family=Recursive&display=swap');</code>

또는 HTML에서 :

<code><link href="https://fonts.googleapis.com/css2?family=Recursive&display=swap" rel="stylesheet"></code>

그런 다음 CSS에 글꼴을 적용하십시오.

 <code>body { font-family: 'Recursive', sans-serif; }</code>

기본 축 값 : MONO 0 , CASL 0 , wght 400 , slnt 0 , CRSV 0 .

스타일 또는 축을 지정합니다

API는 두 가지 접근 방식을 제공합니다.

1. 나열 축 및 특정 값.
2. 나열 축 및 범위.

캐주얼 스타일을 얻으려면 Recursive:CASL@1 . 모노 캐주얼 일반 :

 <code>https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO@1,1&display=swap</code>

규칙적이고 대담한 경우 :

 <code>https://fonts.googleapis.com/css2?family=Recursive:wght@400;700&display=swap</code>

Google Fonts는 종종 여러 요청한 스타일을 다루는 단일 변수 글꼴을 제공합니다. 생산의 경우 필요한 스타일 만 요청하십시오. 가변 축을 사용하면 유연성이 있습니다.

전체 변수 글꼴을 얻습니다

유연성을 극대화하려면 가변 축을 사용하십시오. Recursive:wght@400;700 , Recursive:[email protected] (또는 Recursive:[email protected] )를 사용하십시오. 알파벳순으로 축 추가 : Recursive:wght,[email protected],0..1 .

전체 변수 글꼴 URL :

 <code>https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,[email protected],300..1000,0..1,0..1,0..1&display=swap</code>

HTML에서 :

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:slnt,wght,CASL,CRSV,%5Bemail%C2%A0protected%5D,300..1000,0..1,0..1,0..1&display=swap" rel="stylesheet"></code>

유연성 및 파일 크기의 균형

각 축은 파일 크기를 증가시킵니다. 사용하지 않은 축을 생략하십시오. 다양한 무게를 가진 모노 캐주얼 스타일의 경우 :

 <code><link href="https://fonts.googleapis.com/css2?family=Recursive:CASL,MONO,wght@1,1,300..1000&display=swap" rel="stylesheet"></code>

(참고 : 위의 것은 현재 올바르게 작동하지 않을 수 있습니다. 업데이트는 원본 기사를 참조하십시오.)

여러 글꼴 패밀리를 추가 할 수 있으며 이름으로 알파벳 화 될 수 있습니다.

가변 글꼴 사용

표준 축은 표준 CSS 속성을 사용합니다 ( font-weight: 425; ). 모든 축은 font-variation-settings 사용합니다. 모노 캐주얼 한 매우 무거운 스타일 :

 <code>body { font-weight: 950; font-variation-settings: 'MONO' 1, 'CASL' 1; }</code>

font-variation-settings CSS 사용자 정의 속성과 잘 어울립니다.

가변 글꼴 디자인에 대한 자세한 내용은 VariableFonts.io 및 CSS- 트릭에서 확인할 수 있습니다.

가변 글꼴 성능

64 개의 재귀 스타일을 모두 별도의 파일로 사용하여 총 ~ 6.4MB. 가변 글꼴은 ~ 537 kb입니다. 전체 중량 범위를 갖는 서브 세트 재귀 WOFF2는 60 kb이고; 단일 스타일은 25kb입니다. 세 가지 가중치를 사용하면 가변 글꼴로 ~ 15 kb가 절약됩니다. 전체 가변 글꼴 서브 세트는 281 kb입니다. 파일 크기 외에도 가변 글꼴은 설계 유연성을 제공합니다. Google 글꼴은 글꼴 전달을 최적화합니다.

원래 기사의 나머지 부분은 간결하게 생략되었지만 API 사용, 다른 가변 글꼴을 탐색하고 저자의 작품을 홍보하는 것에 대한 추가 정보로 계속됩니다.

위 내용은 Google 글꼴에서 가변 글꼴을 최대한 활용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!