gatsby omni font loader
v2.0.2
npm install gatsby-omni-font-loader react-helmet
또는
yarn add gatsby-omni-font-loader react-helmet
gatsby-config.js 플러그인 배열에 다음 스 니펫을 추가하십시오.
{
/* Include plugin */
resolve : "gatsby-omni-font-loader" ,
/* Plugin options */
options : {
/* Font loading mode */
mode : "async" ,
/* Enable font loading listener to handle FOUT */
enableListener : true ,
/* Preconnect URL-s. This example is for Google Fonts */
preconnect : [ "https://fonts.gstatic.com" ] ,
/* Self-hosted fonts config. Add font files and font CSS files to "static" folder */
custom : [
{
/* Exact name of the font as defied in @font-face CSS rule */
name : [ "Font Awesome 5 Brands" , "Font Awesome 5 Free" ] ,
/* Path to the font CSS file inside the "static" folder with @font-face definition */
file : "/fonts/fontAwesome/css/all.min.css" ,
} ,
] ,
/* Web fonts. File link should point to font CSS file. */
web : [ {
/* Exact name of the font as defied in @font-face CSS rule */
name : "Staatliches" ,
/* URL to the font CSS file with @font-face definition */
file : "https://fonts.googleapis.com/css2?family=Staatliches" ,
} ,
] ,
} ,
} | 옵션 | 설명 | 기본 |
|---|---|---|
| 방법 | async (기본값) 또는 render-blocking 으로 설정할 수 있습니다. async 모드에서는 글꼴이 최적으로로드되지만 Fout은 보입니다. render-blocking 모드에서는 드문 경우에 FOUT가 발생하지만 글꼴 파일은 렌더 블로킹이됩니다. | 비동기 |
| 범위 | body (기본값) 또는 html 로 설정할 수 있습니다. 적용 할 HTML 클래스 이름의 대상 요소를 설정합니다. | 몸 |
| inablelistener | async 모드에서 작동합니다. 글꼴로드 리스너가 스타일링되지 않은 텍스트의 플래시를 처리하도록 활성화하십시오. 활성화되면 각 글꼴이로드를 마치면 CSS 클래스가 HTML에 적용됩니다. | 거짓 |
| 간격 (v1 만) | enableListener true 이면 작동합니다. 글꼴 리스너 간격 (MS). 기본값은 300ms입니다. 권장 :> = 300ms. | 300 |
| 시간 초과 (v1 만 해당) | enableListener true 이면 작동합니다. 글꼴 리스너 타임 아웃 값 (MS). 기본값은 30 대 (30000ms)입니다. 리스너는 더 이상 타임 아웃 후로드 된 글꼴을 확인하지 않으며 글꼴은 여전히로드 및 표시되지만 Fout을 처리하지 않습니다. | 30000 |
| 관습 | 자체 주최 글꼴 구성. 글꼴 파일과 글꼴 CSS 파일을 static 폴더에 추가하십시오. {name: "Font name", file: "https://url-to-font-css.path"} 개체. | [] |
| 편물 | 웹 글꼴 구성. 파일 링크는 FONT CSS 파일을 가리켜 야합니다. {name: "Font name", file: "https://url-to-font-css.path"} 개체. | [] |
| PRECONNECT | Preconnect 메타에 사용되는 URL. 글꼴 파일이 호스팅되는 기본 URL. | [] |
| 예압 | 예압 메타에 사용되는 추가 URL. custom 및 web 글꼴의 file 속성에 따라 제공된 URL의 예압이 자동으로 생성됩니다. | [] |
우선 순위가 낮은 모드로 글꼴 스타일 시트 및 파일을로드하십시오. 성능의 방식으로 글꼴을 추가하려면 직접 Fout을 처리하고 페이지 렌더링 시간이 낮은지 확인하려면 async 모드를 사용해야합니다.
장점 : 성능, 컨텐츠가 글꼴 파일을 다운로드하고 구문 분석하기 전에 컨텐츠가 표시됩니다.
단점 : Fout을 처리해야합니다
우선 순위가 높은 모드로 글꼴 스타일 시트 및 파일을로드하십시오. 이 플러그인을 다른 프로젝트에서와 같이 성능 최적화 및 Fout 처리없이 프로젝트에 글꼴을 추가하는 간단한 방법으로 사용하려면 render-blocking 모드를 사용해야합니다.
장점 : 간단한 마크 업, 대부분의 경우 FOUT가 발생하지 않습니다
단점 : 글꼴 스타일 시트 및 글꼴 파일은 첫 콘텐츠 페인트 시간을 지연시킬 수 있습니다.
글꼴을 비동기식으로로드 할 때, 풀이 나온 후 글꼴이 몇 분 후에 사용자에게 표시되기 때문에 폰트 (fout)의 플래시가 발생할 수 있습니다.
이를 피하기 위해 CSS를 사용하여 폴백 글꼴을 스타일링하여 글꼴 크기, 라인 높이 및로드되는 메인 글꼴의 문자 간격과 밀접하게 일치 할 수 있습니다.
enableListener: true 가 gatsby-config.js 의 플러그인 구성에서 설정되면 글꼴이로드 될 때 HTML 클래스가 <body> 요소에 추가됩니다.
HTML 클래스 이름 형식은 다음 형식 wf-[font-family-name] 입니다. 모든 글꼴이로드되면 wf-all 적용됩니다.
글꼴 스타일 매칭을 사용하여 완벽한 폴백 글꼴 및 폴백 CSS 구성을 조정할 수 있습니다.
다음은 모든 글꼴이로드 된 후 (구성에 따라 다름) body 요소가 어떻게 보이는지에 대한 예입니다.
< body
class =" wf-lazy-monday wf-font-awesome-5-brands wf-font-awesome-5-free wf-staatliches wf-all "
> </ body > interval 및 timeout 옵션이 제거되었습니다wf-[font-family-name] 으로 변경했습니다. 풀 요청을 만들어 프로젝트에 기여하고 자유롭게 기여할 수있는 문제를 자유롭게보고하십시오.
기부금을 환영하고 감사합니다!
귀하의 기여에 감사드립니다!
Henrik • Lennart • Francis Champagne • Hugo
지원해 주셔서 감사합니다!
로봇 스튜디오
