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。在極少數情況下，FOUT將發生在render-blocking模式中，但是字體文件將變成構造。 | 異步 |
| 範圍 | 可以設置為body （默認）或html 。設置要應用HTML類名稱的目標元素。 | 身體 |
| Enablelistener | 在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"}對象。 | [] |
| 網絡 | Web字體配置。文件鏈接應指向字體CSS文件。 {name: "Font name", file: "https://url-to-font-css.path"}對象。 | [] |
| 前連接 | 用於前連接元的URL。託管字體文件的基本URL。 | [] |
| 預付 | 用於預緊元的其他URL。 custom和web字體的file屬性下提供的URL預加載自動生成。 | [] |
在低優先級模式下加載字體樣式表和文件。如果要以表演方式添加字體，請自己處理福特，並確保頁面渲染時間較低，應使用async模式。
優點：性能，內容將在下載字體文件之前顯示並解析
缺點：需要處理福特
在高優先級模式下加載字體樣式表和文件。如果您想將此插件用作一種簡單的方法，可以像其他任何項目一樣在項目中添加字體，而無需任何性能優化和fout處理，則應使用render-blocking模式。
優點：簡單的標記，在大多數情況下不會發生福特
缺點：字體樣式表和字體文件可以延遲第一個內容塗料時間
當異步加載字體時，可能會發生未風格的文本（fout）閃光燈，因為字體加載後稍後的頁面後稍後顯示給用戶。
為了避免這種情況，我們可以使用CSS樣式的後備字體，以與正在加載的主字體的字體大小，線高和字母間距緊密匹配。
當enableListener: true是在gatsby-config.js中的插件配置中設置的時，隨著字體正在加載，將添加到<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•弗朗西斯香檳•雨果
謝謝您的支持！
Roboto Studio
