분류 design

Google 글꼴은 이제 글꼴 디스플레이를 지원합니다!

컨텐츠 정보

  • 조회 319 (작성일 )

본문

font-display는 CSS 기능으로 글꼴 로드 방법을 제어 할 수 있습니다.


Google 글꼴은 많은 웹 사이트에서 사용되고 있으며 지금까지 글꼴 로드 방법을 제어 할 수 없었습니다.


ajlr0drywst60jjnwbhr.png 


이제 url 매개 변수를 통해 글꼴 표시를 추가 할 수 있습니다!


Google 글꼴에서 글꼴 디스플레이를 사용하려면 어떻게 해야 합니까? 


Google 글꼴 URL에 url 매개 변수&display=를 추가하면 됩니다.


<!-- normal -->
https://fonts.googleapis.com/css?family=Calligraffitti

<!-- adding font-display: fallback -->
https://fonts.googleapis.com/css?family=Calligraffitti&display=fallback

글꼴 디스플레이가 중요한 이유는 무엇입니까? 


Google은 사이트의 순위를 매길 때 실적을 고려합니다. 성능 등급에 포함되는 사항 중 하나는 다음과 같습니다. Webfont 로드 중에 텍스트가 계속 표시되도록 합니다. 


이것은 폰트 디스플레이 설정 없이 Lighthouse Audit (Chrome Dev Tools에 있음)을 실행 중입니다.


gjwuejhzdyz4iaozb0lz.png 


Google 감사는 텍스트가 표시되지 않는 사이트에 네트워크 사용자를 느리게 하는 불이익을 줍니다. 글꼴 디스플레이를 사용하면 느린 연결을 사용하는 사용자는 사이트의 텍스트를 볼 수 있으며 로드된 후 멋진 웹 폰트 버전을 얻을 수 있습니다 (스왑 또는 폴백 포함).


글꼴 디스플레이의 유형은 무엇입니까? 


글꼴 디스플레이의 유형은 다음과 같습니다.

  • font-display : block : 글꼴이 로드 될 때까지 보이지 않는 텍스트의 플래시
  • font-display : swap : 맞춤 글꼴이 로드 될 때까지 대체 글꼴 (스타일이 없는 텍스트의 플래시)
  • font-display : fallback : 블록과 스왑 사이. 잠시 동안 보이지 않는 텍스트
  • font-display : optional : fallback과 같지만 브라우저가 맞춤 글꼴을 사용하지 않기로 결정할 수 있습니다.

a5crz4rlrvqmfivzfbbi.mp4