이 기사에서는 프론트엔드에서 가변 글꼴을 설정하는 방법, 올바르게 로드하는 방법, 설정을 처리하는 방법, '문제점' 등을 살펴보고 학습할 것입니다.
가변 글꼴을 사용해야 하는 이유를 설명하고 실제 사용 사례를 살펴보는 지난 기사에서 우리는 가변 글꼴을 사랑하는 법을 배웠습니다 (확인하세요!). 이번에는 그 사랑이 아름답고 새로운 기쁨으로 피어날 준비가 되어 있습니다. 이 게시물은 가변 글꼴에 뛰어들 준비가 된 웹 개발자를 위한 것이지만 디자이너(및 일반적으로 호기심이 많은 사람)도 확실히 읽을 수 있습니다!
가변 글꼴 대 정적 글꼴 로드에 해당하는 개념적 추상 이미지
가변 글꼴 및 정적 글꼴 로드
지시어 를 통해 가변 글꼴을 로드하는 프로세스는 @font-face동일한 방식으로 정적 글꼴을 로드하는 것과 매우 유사하지만 언급해야 하는 약간의 차이점이 있습니다. 이것은 소스 파일을 참조하는 방법, 스타일 범위를 설정하는 방법, 기본 스타일을 처리하는 방법 모두에 적용됩니다. 이 모든 것을 논의해 봅시다.
소스 파일 형식을 지정하는 방법
먼저 비교를 위해 CSS에서 정적 글꼴 을 로드하는 방법을 보여주는 기본 예제를 살펴보겠습니다 .
이제 가변 글꼴 을 사용하여 다양한 사양에서 다양한 로드 접근 방식을 찾을 수 있습니다. 그러나 올바른 방법은 무엇입니까? 정적 글꼴과 동일한 형식을 사용하려고 시도하지만 파일을 가변 버전으로 변경합니다(파일 이름 참고 VF).
작동할까요? 간단한 대답은 예, 그렇게 될 것입니다. 그러나 이 접근 방식의 문제는 이 글꼴이 가변 글꼴이라는 표시를 브라우저에 제공하지 않는다는 것입니다. 이것은 우아하게 폴백하는 대신 실제로 사용 방법을 모르는 글꼴을 로드한다는 것을 의미합니다.
가변 글꼴을 지정하는 방법에는 몇 가지가 있지만 이 중 일부는 현재 사용되지 않거나 광범위한 브라우저 지원이 부족하므로 야생에서 볼 때 인식하는 것이 좋습니다. 세 가지 방법을 살펴보고 솔루션을 공개하겠습니다.
가변 글꼴 표시
z*-variations먼저 다음 형식 의 가변 글꼴을 사용하고 있다는 표시를 제공할 수 있습니다 .
형식은 이 z*-variations문제를 해결하기 위한 첫 번째 표준이었으며 대부분의 브라우저에서 이 방법을 지원합니다. 문제는 최신 사양에서 더 이상 사용되지 않는다는 것입니다.
supports variations둘째, 최근 기사에서 다음 형식 을 접했을 수 있습니다 .
위의 형식은 작년 W3C 초안에 등장했지만 이미 변경하기로 결정했으므로 사용할 이유가 없습니다.
마지막으로 최신 사양 초안 에 따르면 다음과 같이 수행해야 합니다.
그러나 이러한 유형의 선언을 구현하는 데 너무 서두르지 마십시오! 지금 전환하려고 하면 @font-face광범위한 지원 부족으로 인해 전체 지침을 위반할 수 있습니다.
TLDR: 어떤 형식을 사용해야 합니까?
더 이상 사용되지 않거나 아직 널리 받아들여지지 않는 형식에 의존해서는 안 됩니다. 그러나 우리 가 사용할 수 있는 것이 하나 있습니다: 기능 쿼리 .
지시문을 통해 브라우저를 대상으로 @supports하고 지원하는 경우에만 가변 글꼴을 로드할 수 있습니다. 그리고 실제로 @supports는 보다 폭넓은 지원을 제공합니다 format('woff2-variations')!
또한 새로운 표준이 널리 사용 가능하게 되면 tech('variations')새 표준이 가져올 수 있는 추가 기능을 쉽게 추가할 @supports수 있으며 이전 브라우저에서도 새 형식을 구문 분석하는 데 문제가 있을 수 있으므로 지침은 여전히 매우 유용할 것입니다.
단일 값 대신 범위 사용
가변 글꼴을 로드할 때의 또 다른 차이점은 글꼴 스타일을 단일 값이 아니라 범위로 설정한다는 것입니다.
이러한 범위를 설계 시스템 제한으로 사용할 수도 있습니다. 하지만 자신을 표현할 수 있는 강력한 방법이 있는데도 왜 그렇게 하고 싶어하는지 모르겠습니다.
범위가 필요한 두 가지 속성이 있습니다. font-weight및 font-stretch, 그리고 가변 글꼴이 지원하는 경우 해당 속성을 선언해야 합니다 . 이러한 스타일 범위를 가변 글꼴 선언에 명시적으로 추가하지 않으면 예측할 수 없는 결과가 발생할 수 있습니다. 예를 들어, 일부 브라우저는 글꼴에서 이러한 메트릭을 가져오려고 할 수 있지만 일부는 기본 메트릭을 사용하려고 합니다. 어쨌든 명시적으로 선언하는 것이 항상 더 좋습니다.
Regular 및 Bold 스타일에 해당하는 두 개의 파일을 추가하는 방법과 범위 값을 사용하는 단일 가변 글꼴 스타일로 동일한 작업을 수행하는 방법을 비교해 보겠습니다.
먼저 숫자와 두 개의 파일을 사용하는 정적 글꼴 버전:
가변 글꼴 버전을 확인하는 방법은 다음과 같습니다.
그렇다면 이러한 글꼴 메트릭은 어디에서 얻을 수 있습니까? 글쎄, 당신의 글꼴에는 아마도 일종의 문서가 있을 것이므로 시작하기에 좋은 곳이 될 것입니다!
...하지만 문서가 없는 글꼴을 다루고 있다고 상상해 봅시다 .
이러한 경우 항상 Dinamo Font Gauntlet 또는 Wakamai Fondue 와 같은 서비스를 사용 하여 가변 글꼴 설정과 관련된 가능한 모든 것을 찾을 수 있습니다.
기본 글꼴 설정
5개의 주요 축과 맞춤형 축에 대한 무한한 가능성이 있습니다. 우리는 이것에 대해 너무 많이 파고 들지 않을 것입니다. 대부분 많은 변수가 있으며 이는 특정 글꼴의 세부 사항에 따라 달라질 수 있습니다. 그러나 글꼴에 기본 사용자 정의를 제공하려면 어떻게 해야 합니까?
font-variation-settings속성 내부 @font-face지시문을 사용 하여 가변 글꼴에 기본 설정을 적용할 수 있습니다.
다른 속성에 대해 이야기해 보겠습니다. font-variation-settings는 일반적인 저수준 속성이고 상위 수준 속성에는 , 등과 같은 분리된 특정 속성이 포함 font-weight됩니다 font-stretch.
이들과 함께 사용하는 단위에 주의하십시오. font-variation-settings각 속성에 대해 숫자를 사용 한다는 것을 알 수 있습니다 . font-variation-settings낮은 수준의 속성 이기 때문 입니다. font-stretch, 등과 같은 고급 속성의 경우에는 font-style다를 수 있습니다. 예를 들어, font-stretch백분율을 사용하고 백분율 font-stretch없이 사용하면 작동하지 않습니다.
CSS에서 가변 글꼴 사용에 해당하는 개념적 추상 이미지
CSS에서 가변 글꼴 사용
이제 밝고 반짝이는 가변 글꼴을 선언하고 로드했습니다. 다음에 무엇을 해야 할까요? 스타일을 조정하는 방법과 이를 위해 사용할 속성을 파악해야 합니다. 우리는 이제 엄청난(아직 유한한) 변형을 통해 큰 힘을 얻었습니다.
이 수준의 가능성은 여러 가지 실용적인 질문, 사례 및 요점을 제기할 수 있습니다. 매우 굵고 넓은 글꼴을 사용하려면 font-weight또는 font-variations-settings? 를 사용해야 합니다.
이것은 메뉴에 있습니다:
그러나 이것은 다음과 같습니다.
그것들을 모두 지배하는 하나의 속성을 갖는 것이 좋은 선택이라고 느낄 수도 있지만 ( font-variation-settings) 실제로 그렇게 많지는 않습니다. 주로 font-variation-settings자체 CSS 속성이 없는 사용자 정의 축을 조작하는 데 주로 사용해야 하는 저수준 속성입니다.
저수준 font-variation-settings은 가변 글꼴에서만 작동하며 가변 글꼴이 브라우저에서 지원되지 않고 대체 글꼴이 사용되는 경우 동일한 동작을 하지 않습니다. 따라서 일반/대체 글꼴에서 예상대로 작동할 수 있는 고급 속성을 사용하는 것이 좋습니다.
font-weight대신 가능한 한 높은 수준의 속성( , font-stretch, ) 을 사용하는 것이 황금률 font-style입니다.
font-variation-settings사용자 지정 용도로 유지 하거나 optical-sizing값으로 구성해야 하는 경우( font-optical-sizing속성이 아직 숫자 값을 지원하지 않고 현재 auto/ 만 지원하므로 none) 유지합니다.
또한 사용의 또 다른 단점이 있습니다. 다른 속성이 자식에 적용된 font-variation-settings경우 해당 속성이 상속되지 않고 대신 덮어쓰게 됩니다.font-variation-settings
약간 설명하기 위해 아래 예에서 콘텐츠는 할당된 대로 스타일을 가져오지만 상위 요소
에 할당된 속성을 상속하지 못합니다 .
최신 CSS를 사용하면 사용자 정의 속성을 통해 상속 메커니즘을 구현할 수 있습니다. (하지만 우리는 사용자 정의 축을 상속 가능하게 만들 필요가 없는 한 가치가 없다고 생각합니다.) 그래도 다음과 같이 보일 것입니다.
폴백을 구현하려는 경우 정적 글꼴에도 적용되는 속성을 사용하는 것이 편리합니다.
이 경우 점진적 향상 font-weight을 사용하면 정적 글꼴과 가변 글꼴 모두에 적용되고 GRAD축은 가변 글꼴에만 사용됩니다. 만 사용했다면 font-variation-settings기능 쿼리 폴백을 제공해야 했을 것입니다. 정적 글꼴을 로드하는 브라우저는 인식하지 못합니다 font-variation-settings.
다양한 가변글꼴 마음챙김에 해당하는 개념적이고 추상적인 이미지입니다.
기타 가변 글꼴 마음챙김
기본적인 설정은 생략하고 프론트엔드 개발자가 가변 글꼴을 사용할 때 염두에 두어야 할 몇 가지 다른 사항을 살펴보겠습니다.
고급 글꼴 속성이 있는 키워드 값을 피해야 하는 이유
또한 일부 고급 글꼴 속성에 대해 존재하는 CSS 키워드 를 잠시 살펴보겠습니다 . 그래도 사양에 따라 기본 매핑이 있지만 글꼴이 이 사양을 따를 것이라는 보장이 없기 때문에 사용하지 않는 것이 좋습니다. 일부 글꼴은 이러한 측정항목과 단계를 더 많은 단계로 변경합니다.
항상 명시적이고 키워드 대신 숫자 값을 사용하는 것이 좋습니다.
즉, 모든 것이 제대로 작동하는지 확인하고 사용할 수 있습니다.
그러나 일부 사용자 에이전트에는 태그에 대해 미리 정의된 스타일이 있습니다. 예를 들어 Chrome에서 태그에는 font-weight: bold매핑 대상이 font-weight: 700있으며 가변 글꼴 측정항목은 해당 값과 다를 수 있습니다. 이 문제를 해결하려면 CSS 재설정을 사용하거나 원하는 값으로 재정의하면 됩니다.
의 예기치 않은 동작-webkit-text-stroke
가변 글꼴은 엄청난 유연성을 제공하지만 일부 광범위하게 사용하는 과정에서 예상대로 작동하지 않는 속성이 하나 발견되었습니다.
때때로 글꼴을 사용자 정의하여 윤곽선이 나타나도록 하고 이를 수행하는 속성이 -webkit-text-stroke있습니다. 이 속성에는 (무서운) 접두사가 있지만 모든 주요 브라우저에서 널리 지원됩니다.
그러나 가변 글꼴의 동작은 다릅니다. 가변 글꼴을 사용하여 글자 자체의 윤곽을 그리는 것 외에도 이 글자를 구성하는 모든 개별 부분의 윤곽도 표시한다는 것을 알 수 있습니다.
그리고 각 문자가 여러 부분으로 구성되어 있다는 사실은 글꼴 보간을 위해 필요합니다.
우리는 이것을 정확히 단점이라고 부르지 않을 것이라고 생각하지만 여전히 염두에 두십시오.
정리하기
이 기사에 기여한 Vadim Makeev 에게 감사드립니다 !
결론적으로, 우리는 마침내 안도의 한숨을 쉬게 되어 매우 기쁩니다. 이제 모든 타이포그래피의 풍부함을 웹에서 사용할 수 있으며 미래가 마침내 여기에 있습니다!
우리는 가변 글꼴이 전체 글꼴 산업에 큰 혁신이라고 믿습니다. 사용자와 개발자 모두를 위한 혜택이 있습니다. 남은 것은 디자이너와 프론트엔드 엔지니어가 이를 사용해 보고 새 프로젝트에서 가변 글꼴을 사용하기 시작하는 것입니다!
