2018년 웹 글꼴 로드 방법

8410 단어 fonts showdev css performance

세계 각지에서 사용자 정의 웹 글꼴을 사용하고 있지만 많은 사이트들이 이 글꼴을 정확하게 불러오지 않아 페이지를 불러오는 과정에서 성능 문제, 불러오는 시간이 너무 길고 렌더링이 막히며 내비게이션 기간의 글꼴 교환 등 많은 문제를 초래했다.
나는 많은 개발자들이 이 논점을 소홀히 하거나 그들이 똑같은 실수를 범하는 것을 보았다. 단지'그들은 항상 이렇게 하기 때문일 뿐이다. 아마도 그들은 끊임없이 변화하는 환경에서 일하는 것을 모를 것이다.
나는 단지 우리가 이 순환을 깨고 2018년부터 올바른 일을 해야 한다고 생각한다. 왜냐하면 사용자 정의 웹 글꼴을 불러올 때 네 가지 절차만 고려해야 하기 때문이다.

올바른 글꼴 형식 사용

글꼴 미리 로드

올바른 글꼴 설명

글꼴을 불러오는 동안 보이지 않는 텍스트를 피하십시오

우리는 이 요점들을 하나하나 분해하기 시작한다.

올바른 글꼴 형식 사용하기

웹에서 사용할 수 있는 많은 글꼴 형식이 있지만, IE 8 이상 버전 wtf?! 을 지원하지 않으려면 woff 과 woff2 두 가지 형식만 필요합니다.이것은 당신이 사용해야 할 유일한 두 가지 파일 형식입니다. 기본적으로 gziped (따라서 매우 작기 때문에) 이며 웹에 최적화되어 있습니다. 보시다시피 IE 9+와 모든 녹색 브라우저의 지원을 받습니다.

미리 로드된 글꼴

사용자 정의 글꼴을 사용할 때는 브라우저에 적절한 태그와 rel 속성을 사용하여 글꼴을 미리 로드해야 합니다.

  <link rel="preload" as="font" href="fonts/cicle_fina-webfont.woff2" type="font/woff2" crossorigin="anonymous">
  <link rel="preload" as="font" href="fonts/zantroke-webfont.woff2" type="font/woff2" crossorigin="anonymous">

Note that the use of crossorigin here is important; without this attribute, the preloaded font is ignored by the browser, and a new fetch takes place. This is because fonts are expected to be fetched anonymously by the browser, and the preload request is only made anonymous by using the this attribute.

상기 예시에서 rel="preload" as="font" 속성은 브라우저에서 필요한 자원을 빨리 다운로드하도록 요구할 것이다.그들은 또한 브라우저에 이것은 글꼴이기 때문에 브라우저는 자원 대기열에서 적절하게 우선순위 정렬을 할 수 있다고 알려준다.사용preload hints은 웹 글꼴 성능과 초기 페이지 부하에 큰 영향을 미칠 수 있습니다.사전 로드와 프리페치 프롬프트를 지원하는 브라우저는 HTML 파일에서 프롬프트를 보고 웹 글꼴을 다운로드하기 시작하며 CSS를 기다릴 필요가 없습니다.
반대로 rel="prefetch" 속성을 사용하면 브라우저에 최근 페이지에서 불러오거나 사용자 작업 중에 필요한 자원을 다운로드할 준비를 하고 자원에 낮은 우선순위를 지정할 수 있습니다.
참고 사항:
구글 글꼴과 같은 CDN을 사용한다면, 미리 불러온 글꼴 파일이 CSS와 일치하는지 확인하십시오.글꼴도 정기적으로 업데이트할 수 있습니다. 만약 CSS로 이전 버전을 미리 불러오는 동시에 새 버전을 사용한다면, 같은 글꼴의 두 버전을 다운로드하여 사용자의 대역폭을 낭비할 수 있습니다.유지보수에 편리하도록 개용 <link rel="preconnect"> 👨🏼‍🔬을 고려하다.

올바른 글꼴 선언

성명 글꼴 시리즈는 매우 간단하지만, 우리는 할 때 반드시 몇 가지 일에 관심을 가져야 한다.다음은 사용자 정의 글꼴 시리즈를 설명하는 올바른 예입니다.

@font-face {
  font-family: 'Custom Font';
  font-weight: 400;
  font-style: normal;
  font-display: swap; /* Read next point */
  unicode-range: U+000-5FF; /* Download only latin glyphs */
  src: local('Custom Font'),
       url('/fonts/custom-font.woff2') format('woff2'), 
       url('/fonts/custom-font.woff') format('woff');
}

Unicode range from Google Web Fundaments

보시다시피 최적화된 글꼴 (woff와woff2)만 사용합니다. 브라우저에서 필요한 글꼴 범위 U+000 부터 U+5FF 까지만 다운로드할 수 있습니다.함수와 글꼴 순서에 주의해야 할 두 가지가 있다.첫 번째는 사용자가 다운로드가 아닌 글꼴의 로컬 복사본 (예를 들어android에 미리 설치된 Roboto 글꼴) 을 사용할 수 있도록 합니다.브라우저가 성명 순서에 따라 자원을 얻기 시작하기 때문에 글꼴 성명 순서도 매우 중요하다.만약 woff2 형식을 지원한다면, 자원 형식을 식별하지 못하면 다음 형식으로 넘어갈 것입니다.local() 및 eot 글꼴을 모두 사용하려면 ttf 선언의 끝에 글꼴을 추가해야 합니다.

리소스

Glyphs range generator 작성자: Eli Fitch

src

Modern Font Face generator

글꼴을 로드하는 동안 보이지 않는 텍스트를 피하십시오.

글꼴은 보통 큰 파일로 gziped에서도 불러오는 데 시간이 걸립니다.이 문제를 해결하기 위해 일부 브라우저는 글꼴을 불러오기 전에 텍스트를 숨깁니다. ("보이지 않는 텍스트의 깜박임")"flash"를 사용하지 않고 시스템 글꼴을 사용하여 사용자에게 내용을 즉시 표시한 다음 대체할 수 있습니다.
앞의 unicode-range 예시에서 @font-face 성명을 알 수 있습니다.font-display 값은 브라우저에 이 글꼴을 사용하는 텍스트는 즉시 시스템 글꼴로 표시되어야 한다는 것을 알려줍니다.사용자 정의 글꼴이 준비되면 시스템 글꼴이 조정됩니다.
만약 abrowser does not supportswap가 글꼴을 불러오는 기본 동작을 계속 따른다면.
브라우저
글꼴이 준비되지 않았을 때의 기본 동작...