Gatsby Omni Font Loader 使用教程

Gatsby Omni Font Loader 使用教程

gatsby-omni-font-loaderFont loader optimized for maximum performance. Removes render-blocking font resources and loads them asynchronusly. Handle FOUT & FOUC with font loading status watcher. Supports both local-hosted fonts and web fonts.项目地址:https://gitcode.com/gh_mirrors/ga/gatsby-omni-font-loader

1. 项目的目录结构及介绍

Gatsby Omni Font Loader 项目的目录结构如下：

gatsby-omni-font-loader/
├── src/
│   ├── components/
│   │   └── AsyncFonts.tsx
│   └── generators/
│       └── getFontConfig.tsx
├── static/
│   └── fonts/
│       └── fontAwesome/
│           └── css/
│               └── all.min.css
├── gatsby-config.js
├── package.json
└── README.md

目录结构介绍

• src/: 包含项目的源代码。
  • components/: 存放 React 组件。
    • AsyncFonts.tsx: 异步加载字体的组件。
  • generators/: 存放生成器文件。
    • getFontConfig.tsx: 生成字体配置的文件。
• static/: 存放静态资源文件。
  • fonts/: 存放自定义字体文件。
    • fontAwesome/: Font Awesome 字体文件夹。
      • css/: CSS 文件夹。
        • all.min.css: Font Awesome 的 CSS 文件。
• gatsby-config.js: Gatsby 配置文件。
• package.json: 项目的依赖和脚本配置文件。
• README.md: 项目说明文档。

2. 项目的启动文件介绍

项目的启动文件主要是 gatsby-config.js，它包含了 Gatsby 项目的配置信息。

gatsby-config.js

module.exports = {
  plugins: [
    {
      resolve: "gatsby-omni-font-loader",
      options: {
        mode: "async",
        enableListener: true,
        preconnect: ["https://fonts.gstatic.com"],
        custom: [
          {
            name: ["Font Awesome 5 Brands", "Font Awesome 5 Free"],
            file: "/fonts/fontAwesome/css/all.min.css",
          },
        ],
        web: [
          {
            name: "Staatliches",
            file: "https://fonts.googleapis.com/css2?family=Staatliches&display=swap",
          },
        ],
      },
    },
  ],
};

启动文件介绍

• plugins: 配置 Gatsby 插件。
  • resolve: 插件的名称。
  • options: 插件的配置选项。
    • mode: 字体加载模式，这里设置为异步加载。
    • enableListener: 启用字体加载监听器，处理 FOUT（Flash Of Unstyled Text）。
    • preconnect: 预连接 URL，这里预连接 Google Fonts。
    • custom: 自定义字体配置。
      • name: 字体名称。
      • file: 字体 CSS 文件路径。
    • web: 网络字体配置。
      • name: 字体名称。
      • file: 字体 CSS 文件 URL。

3. 项目的配置文件介绍

项目的配置文件主要是 package.json，它包含了项目的依赖和脚本配置。

package.json

{
  "name": "gatsby-omni-font-loader",
  "version": "2.0.2",
  "description": "Font loader optimized for maximum performance. Removes render-blocking font resources and loads them asynchronously. Handle FOUT & FOUC with font loading status watcher. Supports both local-hosted fonts and web fonts.",
  "keywords": [
    "gatsby-plugin",
    "gatsby",
    "plugin",
    "async",
    "frontend",
    "web",
    "font",
    "loader",
    "google",
    "webfont",
    "local",
    "custom"
  ],
  "author": "Adrian Bece <adrianbece@live.com>",
  "license": "MIT",
  "homepage": "https://github.com/codeAdrian/gatsby-omni-font-loader",
  "bugs": {
    "url": "https://github.com/code

gatsby-omni-font-loaderFont loader optimized for maximum performance. Removes render-blocking font resources and loads them asynchronusly. Handle FOUT & FOUC with font loading status watcher. Supports both local-hosted fonts and web fonts.项目地址:https://gitcode.com/gh_mirrors/ga/gatsby-omni-font-loader