성능을위한 웹 글꼴 최적화 : 기술의 상태

이 기사는 사이트 지상 파트너십 기부금입니다. 스폰서를 지원해 주셔서 감사합니다 웹 사이트의 63 %가 이제 사용자 정의 웹 글꼴을 사용합니다. 그러나이 광범위한 채택은 성능과 사용자 경험 과제를 제시합니다. 이 기사는 웹 글꼴 구현의 일반적인 함정을 탐구하고 확립 된 해결 방법 및 미래 방지 표준을 포함한 솔루션을 제공합니다. 키 포인트 :

웹 사이트의 67%에서 사용되는 맞춤형 웹 글꼴은 크기와로드 시간으로 인해 성능 및 사용자 경험에 부정적인 영향을 줄 수있어 보이지 않는 텍스트 (FOIT)의 플래시를 유발할 수 있습니다. 사용자 정의 글꼴을 최적화하면 서체를 최소화하고 브라우저 호환 형식 (WOFF2 우선 순위), 필요한 스타일 만로드하며 문자 세트를 제한하는 것이 포함됩니다. FOIT와 싸우려면 시스템 글꼴 사용, 비동기로드를 위해 웹 글꼴 로더를 사용하거나 과립 제어를 위해 CSS 글꼴로드 API를 활용하는 것을 고려하십시오. CSS 속성은 고급 글꼴로드 관리를 제공하지만 브라우저 지원은 불완전합니다. 끊임없는 텍스트 (fout)의 플래시가 지속될 수 있지만, 사용자 지정 글꼴과 폴백 글꼴 메트릭 (x- 높이 및 너비)을 정렬하여 그 영향을 줄일 수 있습니다.

커스텀 웹 글꼴의 매력 :

웹 사이트 방문자는 콘텐츠를 우선시합니다. 따라서 탁월한 타이포그래피는 가독성, 가독성 및 브랜드 아이덴티티에 필수적입니다. 사용자 장치에 사전 설치되지 않은 사용자 정의 웹 글꼴-우수한 타이포그래피 설계를 방해합니다. CSS 규칙은 광범위한 채택을 가능하게했지만 글꼴 파일의 고유 한 크기는 사이트 성능에 영향을 줄 수 있습니다. 효율적인 글꼴 로딩이 가장 중요합니다

보이지 않는 텍스트 (FOIT)의 플래시 이해 : CSS를 통해 정의하고 기본 브라우저 동작에 의존하는 사용자 정의 글꼴을 사용하는 일반적인 방법은 차선책입니다. 브라우저는 종종 CSS 구문 분석이 완료 될 때까지 글꼴 로딩을 지연시킵니다. 또한 Zach Leatherman이 강조하는 것처럼 글꼴 다운로드에는 특정 조건이 필요합니다. 지정된 . 를 사용한 HTML 요소 webkit 및 깜박임 브라우저에서 요소는 비어 있지 않아야합니다. 유니 코드 범위 설명자를 지원하는 브라우저의 경우 컨텐츠가 지정된 범위와 일치해야합니다.

이 지연된 다운로드는 종종 FOIT : 글꼴로드까지 텍스트를 보이지 않습니다. FOIT의 브라우저 처리는 다음과 같습니다
깜박임 및 Firefox는 3 초 시간의 시간 초과를 사용합니다. 글꼴이로드되지 않으면 폴백 글꼴이 표시되어 잠재적으로 fout (플래시의 텍스트 플래시). Safari, Android의 기본 브라우저 및 BlackBerry는 글꼴로드까지 텍스트를 표시하지 않아 사용자가 빈 공간을 남겨 두십시오. 즉, 가장 사용자 친화적 인 접근 방식 인 폴백 글꼴을 직접 표시합니다.
• Fout은 FOIT보다 덜 파괴적이지만 이상적으로는 모두 피해야합니다. 그러나 많은 전문가들은 fout가 foit에 선호되는 것으로 간주합니다.
• 사용자 정의 글꼴 파일 최적화 : 몇 가지 전략이 글꼴 파일 크기를 최소화합니다
• 서체 최소화 :
신중하게 선택된 글꼴을 적수를 사용하십시오.

브라우저 호환 형식 :

우선 순위를 지정하여 Woff로 돌아갑니다. 예 : <..>
필요한 스타일 만로드 :

사용하지 않은 글꼴 변형을로드하지 마십시오 (이탈리아, 대담한 등).

1. 서브 세트 문자 세트 :

   페이지에 사용 된 문자 만 포함하십시오. (자세한 내용은 Dudley Storey의 "CSS 글꼴 서브 세트가있는 슬래시 페이지로드 시간"참조)

   주소 지정 :
몇 가지 방법은 foit : 를 완화합니다

2. 사용자 정의 글꼴을 피하십시오 (시스템 글꼴로의 폴백) : 단순하지만 미학적으로 유쾌하지만 솔루션은 시스템 글꼴에만 의존하는 것입니다. 예 : <..>

   @font-face {
     font-family: 'Open Sans';
     src: local('Open Sans'), local('OpenSans'),
          url('fonts/open-sans.woff2') format('woff2'),
          url('fonts/open-sans.woff') format('woff');
   }

웹 글꼴 로더 :
3. 이 JavaScript 라이브러리가 글꼴을 비동기로로드하여 사용자 정의 글꼴을 사용할 수있을 때까지 폴백을 표시합니다.

   CSS 글꼴로드 API :

   이 표준 API는 글꼴로드에 대한 세밀한 제어 기능을 제공하여 사용자 정의 글꼴이 준비 될 때까지 시스템 글꼴을 사용 할 수 있습니다. (튜토리얼을 위해 Manuel Matuzovic의 "CSS 글꼴로드 시작"을 참조하십시오)

4. 미래 : css :

CSS
속성은 글꼴 로딩 및 폴백 동작에 대한 세분화 된 제어를 제공합니다. 값에는 ,

, , 및 가 포함됩니다. 브라우저 지원은 여전히 ​​제한되어 있지만 웹 글꼴 로딩의 미래를 나타냅니다. 완화 fout :

위의 방법은 FOIT를 다루지 만 여전히 발생할 수 있습니다. 그 영향을 최소화하는 것은 Monica Dinculescu의 글꼴 스타일 매칭과 같은 도구를 사용하여 Fallback Font의 X- 높이와 너비를 맞춤형 글꼴 크기와 일치시키는 것입니다.

결론 :

효율적인 웹 글꼴 관리하려면 파일 크기를 최적화하고 글꼴 로딩 동작을 제어해야합니다. 제공된 리소스와 함께 여기에서 논의 된 방법은 웹 사이트 성능 및 사용자 경험을 향상시키기위한 효과적인 솔루션을 제공합니다.
자주 묻는 질문 (faqs) :

1. (원래 입력의 FAQ 섹션은 이미 잘 작성되어 있으며이 다시 쓰기에 대해 상당한 수정이 필요하지 않습니다.) 원래 FAQ 섹션은 그대로 유지됩니다.

위 내용은 성능을위한 웹 글꼴 최적화 : 기술의 상태의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!