가변 글꼴 : 그들이 무엇인지, 그리고 그것들을 사용하는 방법
- William Shakespeare원래의
- 2025-02-15 08:24:11464검색
이 기사에서는 변수 글꼴을 둘러싼 흥미로운 새로운 가능성을 살펴 보겠습니다.
-
1998 년 CSS 실무 그룹은 웹 페이지에서 모든 서체를 렌더링 할 수 있도록 @font-face 규칙의 지원을 제안했습니다. IE4는이 기술을 구현했지만 모든 사용자의 브라우저에 대한 글꼴을 라이센스 및 불법 복제 문제로 인상했습니다.
2000 년대 초반에는 HTML 컨텐츠를 스타일의 텍스트 이미지로 대체하는 이미지 교체 기술의 상승을 보았습니다. 각 텍스트는 Photoshop과 같은 프로그램에서 슬라이스해야했습니다. 이 기술은 디자이너가 글꼴 라이센스를 처리하지 않고도 사용 가능한 모든 서체를 사용할 수 있도록하는 주요 이점이있었습니다.2008 년 @font-face는 Apple Safari와 Mozilla Firefox가 구현했을 때 마침내 컴백을했습니다. 이것은 디자이너와 개발자가 접근 할 수없는 이미지가 아닌 사용자 정의 글꼴을 사용할 수있는 간단한 방법을 제공해야 할 필요성에서 나왔습니다.
.변수 글꼴 사용
단락이있는 매우 간단한 페이지를 만들었습니다.
Codepen에서 sitepoint (@sitepoint)에 의해 펜 변수 fonts html을 참조하십시오.
wght-weight weight CSS 속성과 동일합니다. 값은 1에서 999까지의 모든 것이 될 수 있습니다
wdth-폭은 Font-Stretch CSS 속성과 동일합니다. 키워드 또는 백분율 값이 필요할 수 있습니다. 이 축은 일반적으로 우아하게 확장하거나 압축하기 위해 글꼴 디자이너에 의해 정의됩니다.
opsz-광학 크기는 글꼴 광학 크기를 사용하여 켜거나 끄질 수 있습니다.
Codepen에서 Sitepoint (@SitePoint)의 펜 변수 글꼴 1 참조.
결론
현재로서는 Chrome, Firefox, Safari 및 Edge를 포함한 대부분의 최신 브라우저가 변수 글꼴을 지원합니다. 그러나이 브라우저의 이전 버전과 덜 일반적인 브라우저는이를 지원하지 않을 수 있습니다. 가변 글꼴에 대한 특정 브라우저 지원을 확인하고 지원되지 않는 브라우저에 대한 폴백 글꼴을 제공하는 것이 항상 좋은 생각입니다. 자신의 가변 글꼴을 어떻게 만들 수 있습니까? 가변 글꼴의 한계는 무엇입니까? 변수 글꼴은 어떻게 감소하여 웹 성능을 크게 향상시킬 수 있습니다. 로드 해야하는 글꼴 파일 수. 다른 글꼴 무게와 스타일에 대해 여러 파일을로드하는 대신 웹 사이트는 단일 변수 글꼴 파일을로드하고 필요에 따라 변형을 조정할 수 있습니다. 이렇게하면 파일 크기가 줄어들고 웹 사이트의로드 속도를 향상시킬 수 있습니다.
font-stretch
이 속성은 글꼴에서 정상, 응축 또는 확장 된 얼굴을 선택합니다. 글꼴 중량 속성과 마찬가지로, 균형이 잡히거나 정상과 같은 명명 된 인스턴스 또는 0%에서 100% 사이의 백분율 일 수 있습니다. 또한 명명 된 인스턴스는 알려진 백분율로 매핑됩니다. 예를 들어, 균형이 잡히면 62.5%로 매핑됩니다
이 예에서는 단일 제목과
변수 글꼴을 사용하려면 적절한 파일을 찾아야합니다. V-Fonts 프로젝트는 모든 유형의 가변 글꼴을 검색하고 실험 할 수있는 글꼴 저장소를 제공합니다. 나는 Avenirnext 글꼴을 사용하여 공식 Github 페이지에서 연결하기로 결정했습니다.
그런 다음이 새로운 글꼴을로드하려면 CSS 파일을 만들어야합니다.
<span><span>@font-face</span> {
</span> <span>font-family: Avenir Next Variable;
</span> <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>
<span><span>@font-face</span> {
</span> <span>font-family: Avenir Next Variable;
</span> <span>src: <span>url(AvenirNext_Variable.woff)</span>;
</span><span>}
</span>
성능
일부 최신 브라우저는 이미 가변 글꼴을 지원하는 반면 (Firefox 개발자 에디션에는 약간의 지원 수준, Chrome 62, Chrome Android, Safari IOS 및 Safari)가 없을 수도 있습니다. >
변수 글꼴은 전통적인 글꼴에 비해 몇 가지 장점을 제공합니다. 첫째, 단일 글꼴 파일의 다양한 변형을 제공하여 파일 크기를 크게 줄이고 웹 사이트의로드 속도를 향상시킬 수 있습니다. 이는 데이터 요금제가 제한된 모바일 사용자에게 특히 유익합니다. 둘째, 가변 글꼴은보다 창의적이고 반응이 좋은 디자인을 허용합니다. 디자이너는 글꼴의 무게, 너비, 경사 및 기타 속성을 조정하여 독특하고 역동적 인 시각적 경험을 만들 수 있습니다. 마지막으로, 가변 글꼴은 글꼴 렌더링에 미세 조정을 허용함으로써 특히 작은 화면 또는 저해상도 장치에서 텍스트의 가독성을 향상시킬 수 있습니다. CSS에서 가변 글꼴을 어떻게 구현합니까?
CSS에서 가변 글꼴을 구현하려면 몇 단계가 필요합니다. 먼저 @font-face 규칙을 사용하여 변수 글꼴 파일을 가져와야합니다. 그런 다음‘Font-Variation-Settings’속성을 사용하여 글꼴의 변형을 조정할 수 있습니다. 예를 들어, '글꼴 변수 설정 :“WGHT”700;'글꼴의 무게를 700으로 설정합니다. 특정 변형 태그 (무게에 대한“WGHT”)는 글꼴에 따라 다를 수 있습니다.
예, Google Fonts는 변수 Fonts를 지원합니다. . Google 글꼴에서 글꼴을 선택하면 변수 글꼴 버전을 다운로드하기 위해 "변수"옵션을 선택할 수 있습니다. 그런 다음 CSS의‘Font-Variation-Settings’속성을 사용하여 글꼴의 변형을 조정할 수 있습니다.
Roboto, Source Sans, Amstelvar 및 Decovar를 포함하여 사용 가능한 많은 변수 글꼴이 많이 있습니다. 이 글꼴은 다양한 변형을 제공하며 다양한 디자인 스타일에 적합합니다. v-fonts.com 또는 Google 글꼴과 같은 웹 사이트에서 더 많은 가변 글꼴을 찾을 수 있습니다. 자신만의 변수 글꼴을 만드는 글꼴 설계에 대한 지식이 필요합니다. Fontlab VI 또는 Glyphs와 같은 특정 소프트웨어. 이 프로그램을 사용하면 글꼴의 다양한 변형을 설계하고 단일 변수 글꼴 파일로 내보낼 수 있습니다. 그러나 글꼴 디자인은 많은 연습과 기술이 필요한 복잡한 프로세스입니다.
가변 글꼴은 많은 장점을 제공하지만 몇 가지 제한 사항도 있습니다. 모든 글꼴이 가변 형식으로 제공되는 것은 아니며 모든 브라우저가 지원하는 것은 아닙니다. 또한 글꼴의 변형을 조정하는 것은 복잡 할 수 있으며 CSS 및 글꼴 디자인을 잘 이해해야합니다. 마지막으로, 가변 글꼴은 파일 크기를 줄일 수 있지만 많은 변형이 사용되면 파일 크기를 줄일 수 있습니다. 가변 글꼴이 웹 성능을 향상시키는 방법은 무엇입니까?
예, CSS 애니메이션 또는 전환을 사용하여 가변 글꼴을 애니메이션 할 수 있습니다. 'Font-Variation-Settings'속성을 애니메이션으로 사용하면 시간이 지남에 따라 글꼴의 무게, 너비, 경사 또는 기타 속성을 변화시키는 동적 텍스트 효과를 생성 할 수 있습니다.
웹 타이포그래피의 미래를 예측하기는 어렵지만 가변 글꼴은 확실히 큰 역할을 할 가능성이 있습니다. 그들의 유연성, 효율성 및 창의적 잠재력은 웹 디자이너를위한 강력한 도구입니다. 그러나 그들의 채택은 브라우저 지원, 가변 글꼴의 가용성 및 디자이너의 요구와 기술에 달려 있습니다.
위 내용은 가변 글꼴 : 그들이 무엇인지, 그리고 그것들을 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!