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
