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

보이지 않는 텍스트 (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 섹션은 그대로 유지됩니다.