글꼴 로더로 페이지 성능을 향상시키는 방법

키 포인트 요약

폰트 로더를 사용하면 웹 페이지 성능을 크게 향상시킬 수 있으며 웹 페이지 글꼴의로드 타이밍 및 방법을 제어 할 수 있으므로 페이지로드 시간을 단축하고 "스타일의 텍스트 깜박임"(Fout)을 피할 수 있습니다. webfontloader JavaScript 라이브러리는 페이지를로드 한 후 백그라운드의 다양한 소스에서 글꼴을로드 할 수있는 매우 유용한 도구이며 CSS 및 JavaScript 콜백 기능을 사용하여로드 프로세스를 사용자 정의 할 수 있습니다.

글꼴 사용 및 사용자 경험은 균형을 이루어야합니다. 글꼴은 웹 사이트의 미학을 향상시킬 수 있으며, 많은 수의 글꼴 또는 글꼴을로드하면 특히 모바일 장치에서 페이지로드가 느려집니다. 따라서 글꼴 로더를 사용하고 대체 글꼴을 구현하면 매끄럽고 빠른 사용자 경험을 유지하는 데 도움이됩니다.

• 이 기사의 글을 썼던 영감에 대한 Jason Pamental에게 특별한 감사를드립니다. 그렇지 않으면 나는 이것에 대해 결코 생각하지 않을 수도 있습니다! 마지막으로 당신이 Arial, Times New Roman, Helvetica 또는… (Chilling) 웹 페이지에서… 만화 Sans는 언제였습니까? 웹 글꼴이 너무 늦게 나타나지만 일단 나타나면 우리는 결코 뒤돌아 보지 않습니다. 글꼴은 재미 있고 (보통) 무료이며 구현하기 쉽습니다 :
• 그런 다음 페이지에서 글꼴을 사용할 수 있습니다.
글꼴은 모바일 장치에서 제대로 작동하므로 사용자는 반응 형 웹 디자인에서 좋은 경험을 얻습니다. 아니면 실제로 사실입니까?
• 사진 후 글꼴은 일반적으로 웹 페이지에서 가장 큰 리소스입니다. 위의 우분투 글꼴은 페이지에 거의 250kb를 추가하며, 이는 모바일 네트워크 연결이 느리게 나타납니다. Chrome, IE, Safari 및 Opera는 글꼴이로드되면 빈 공간을 남겨 두므로 페이지를 사용할 수 없습니다. Firefox 및 기존 버전의 오페라 디스플레이 텍스트는 대체 글꼴 및 스위치로 텍스트를 표시합니다.이를 임시 텍스트 플래시 (FOUT)라고합니다. 이러한 상황 중 어느 것도 이상적이지 않습니다. 우리는 글꼴 가중 문제에 대해 거의 걱정하지 않고 "이것은 첫 페이지의 문제 일뿐입니다"또는 "많은 사용자가 글꼴을 캐시했습니다"와 같은 변명을합니다. 예를 들어 대부분의 우분투 이탈리아 스타일을 제거하면 거의 40%를 절약 할 수 있습니다. 표준 운영 체제 글꼴을 사용하여 명백한 솔루션을 채택하는 사람은 거의 없습니다. 고객과 디자이너는 결코 우리를 용서하지 않을 것입니다.
JavaScript WebFontloader 운 좋게도 다른 옵션이 있습니다 : WebFontloader. 이 JavaScript 라이브러리는 페이지로드 후 Google, Typekit, Fonts.com, FontDeck 또는 자체 서버에서 글꼴을로드 할 수 있습니다. 라이브러리 자체는 페이지에 추가 17KB를 추가하지만 백그라운드 프로세스로 다운로드됩니다. 위의 Ubuntu 글꼴을로드하려면 글꼴과 설정을 정의하는 WebFontConfig라는 전역 객체를 만듭니다. 그런 다음 WebFontLoader 자체를로드합니다.

<code>@import url(http://fonts.googleapis.com/css?family=Ubuntu:300,300italic,400,400italic,500,500italic,700,700italic);</code>

따라서 따라서 장치 및 대역폭 용량에 따라 일부 또는 전부가로드되는지 여부를 결정할 수 있습니다. 이상적으로는 네트워크 정보 API를 사용할 수 있지만 브라우저 지원은 여전히 ​​제한적입니다. 또는 WebFontConfig의 시간 초과 설정에 유의하십시오.

CSS 콜백 함수

WebFontLoader는 작동 중에 클래스 이름을 HTML 요소에 적용합니다.

- 모든 글꼴은 에게 요청됩니다 - 모든 글꼴을 사용할 수 있습니다 - 글꼴을로드 할 수 없습니다

클래스 이름은 각 글꼴에도 적용됩니다 :
- 단일 글꼴이
• 를 요청했습니다 .wf-loading - 단일 글꼴로 사용 가능
• - 단일 글꼴을로드 할 수 없습니다 .wf-active
여기서 는 글꼴 이름의 정제 된 버전이고 .wf-inactive는 400 두께의 이탤릭체를 나타내는 변형 설명입니다. 이를 통해 글꼴 다운로드 후 글꼴을 전환 할 수 있습니다. 예를 들어 Firefox와 같은 방식으로 다음과 같습니다. JavaScript 콜백 함수
유사한 javaScript 콜백 함수는 WebFontConfig에서 정의 될 수 있지만 :

와 같이 거의 유용하지는 않습니다.

자세한 내용은 WebFontLoader 문서를 참조하십시오.
• fout .wf-<familyname>-<fvd>-loading</fvd></familyname> 를 최소화하십시오 대체 글꼴이 스타일, 두께 또는 간격 측면에서 웹 글꼴과 매우 다른 경우, 텍스트가 깜박임이 가혹 할 수 있습니다. 그러나 약간의 실험을 통해 대체 글꼴, 두께, 선 높이 및 여백을 조정하여 웹 글꼴을로드 할 때 페이지 요소가 거의 동일하게 유지되도록 할 수 있습니다 ... Codepen (@craigbuckler)의 Craig Buckler를 참조하십시오. " 글꼴 로더 사용 방법 ".
"스위치 글꼴"버튼을 클릭하여 글꼴 스위칭 효과를 볼 수 있습니다. 이 변경은 전적으로 명백하지는 않지만 사용자가 읽기 시작하면 자리를 잃지 않는 것이 중요합니다. 적절한 대체 스타일을 평가할 수 있도록 "스위치 글꼴"버튼을 모든 페이지에 추가 할 수 있습니다.
• 요컨대 : 글꼴 사용은 무료 일 수 있지만 사용자 비용을 최소화하십시오. 1MB의 글꼴 파일을로드하는 경우 신중하게 생성 된 반응 형 웹 디자인은 모바일 장치에 적합하지 않습니다! .wf-<familyname>-<fvd>-active</fvd></familyname>
(다음은 원본 텍스트를 기반으로 다시 작성 및 통합 된 FAQ 부분이며 일부 내용이 간소화되었습니다)
• . .wf-<familyname>-<fvd>-inactive</fvd></familyname> 웹 페이지 성능을 향상시키기 위해 글꼴 로더를 사용하여 자주 묻는 질문

글꼴 로더는 무엇입니까? 페이지 성능에 중요한 이유는 무엇입니까? <familyname></familyname> Font Loader는 웹 사이트에 웹 글꼴이로드되는 방식을 제어 할 수있는 도구입니다. 웹 사이트의로드 시간을 줄이는 데 도움이 될 수 있으므로 페이지 성능에 중요합니다. 웹 페이지가로드되면 브라우저는 글꼴을 포함한 필요한 모든 리소스를 다운로드해야합니다. 글꼴이 크거나 크면 페이지로드 시간이 느려집니다. 글꼴 로더를 사용하면 이러한 글꼴이로드되는 방법 및 방법을 제어 할 수 있으므로 페이지 성능을 크게 향상시킬 수 있습니다.

글꼴 로더는 페이지 성능을 어떻게 개선합니까?

Font 로더는 웹 글꼴의로드를 제어하여 페이지 성능을 향상시킵니다. 글꼴을 비동기로로드하도록 선택할 수 있습니다. 즉, 나머지 페이지의 렌더링을 차단하지 않습니다. 이렇게하면 페이지가 대화식이되는 데 걸리는 시간이 크게 줄어 듭니다. 또한 글꼴 로더는 "FOUT (Unstyled Text Flickering)"(FOUT) 현상을 방지하는 데 도움이 될 수 있으며, 여기서 웹 글꼴이 여전히로드되는 동안 브라우저에 대체 글꼴이 표시됩니다.

일반적으로 사용되는 글꼴 로더는 무엇입니까? Google의 WebFont 로더 및 TypEkit의 WebFont 로더를 포함하여 일반적으로 사용되는 여러 글꼴 로더를 사용할 수 있습니다. 두 도구 모두 웹 글꼴이로드되는 방식을 제어하기위한 여러 옵션을 제공합니다. 웹 사이트에서 글꼴로드를 쉽게 구현할 수있는 WordPress 플러그인 (예 : 개발 Google 글꼴)도 있습니다.

내 웹 사이트에서 글꼴 로더를 구현하는 방법은 무엇입니까?

웹 사이트에서 글꼴 로더를 구현하려면 일반적으로 HTML에 스크립트를 추가해야합니다. 이 스크립트는 글꼴 로더를로드 한 다음 글꼴 로더의 API를 사용하여 웹 글꼴이로드되는 방법을 제어 할 수 있습니다. 정확한 프로세스는 사용중인 글꼴 로더에 따라 다를 수 있으므로 특정 지침에 대한 설명서를 참조하는 것이 좋습니다.

웹 글꼴과 함께 글꼴 로더를 사용할 수 있습니까? 대부분의 글꼴 로더는 글꼴이 글꼴 로더가로드 할 수있는 방식으로 호스팅되는 한 모든 웹 글꼴과 호환됩니다. 여기에는 Google Fonts 또는 Typekit과 같은 글꼴 서비스가 호스팅하는 자체 호스팅 글꼴 및 글꼴이 포함됩니다.

글꼴 로더를 사용하는 것이 내 글꼴 모양에 영향을 미칩니 까?

폰트 로더를 사용하면 FONT를 방지 할 수 있으므로 글꼴 모양에 영향을 줄 수 있습니다. 그러나 글꼴의 실제 디자인이나 스타일을 변경해서는 안됩니다. 글꼴 로더를 구현 한 후 글꼴 모양이 변경되는 경우 구성 문제로 인한 것일 수 있습니다.

"무력화되지 않은 텍스트 깜박임"(Fout)이란 무엇입니까? 글꼴 로더는 어떻게 막을 수 있습니까? fout은 웹 글꼴이 여전히로드 될 때 브라우저에 대체 글꼴을 표시하는 현상입니다. 이로 인해 글꼴이 최종 글꼴과 다르면서 간단한 텍스트가 깜박일 수있어 사용자를 불편하게 만들 수 있습니다. 글꼴 로더는 웹 글꼴을 텍스트에 적용 할 때 제어 할 수있게하여 Fout을 방지합니다. 예를 들어, 웹 글꼴이로드 될 때까지 텍스트를 숨기거나 대체 글꼴에 텍스트를 표시하고 웹 글꼴이로드 된 후 교체 할 수 있습니다. 글꼴 로더가 내 웹 사이트의 SEO를 향상시킬 수 있습니까?

예, 글꼴 로더는 페이지로드 시간을 줄임으로써 웹 사이트의 SEO를 향상시킬 수 있습니다. 페이지로드 시간은 웹 사이트 순위를 매기는시 검색 엔진이 고려하는 요소이므로 웹 사이트를 줄이기 위해 무엇이든 할 수있어 SEO가 향상 될 수 있습니다.
글꼴 로더 사용의 단점이 있습니까?

글꼴 로더 사용의 잠재적 인 단점 중 하나는 웹 사이트 코드의 복잡성을 증가시킬 수 있다는 것입니다. 그러나 개선 된 페이지 성능 및 사용자 경험의 이점은 종종 이러한 단점을 능가합니다. 또한 많은 글꼴 로더에는 좋은 문서화와 지원이있어 비교적 쉽게 구현할 수 있습니다. 글꼴 로더가 내 페이지 성능을 향상시키는 지 알리는 방법은 무엇입니까? 폰트 로더를 구현하기 전후에 페이지 성능을 측정하기 위해 다양한 도구를 사용하여 페이지 성능을 측정 할 수 있습니다. 이 도구는 페이지 로딩 시간, 첫 번째 추첨 시간 및 대화식 시간과 같은 메트릭을 제공하여 글꼴 로더의 영향을 정량화하는 데 도움이 될 수 있습니다. 일반적으로 사용되는 성능 측정 도구에는 Google의 등대 및 WebPagetest가 포함됩니다.

위 내용은 글꼴 로더로 페이지 성능을 향상시키는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!