Gatsby项目中使用本地字体文件的完整指南-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00994/article/details/148325246

Gatsby项目中使用本地字体文件的完整指南

gatsby The best React-based framework with performance, scalability and security built in. 项目地址: https://gitcode.com/gh_mirrors/ga/gatsby

前言

在现代Web开发中，字体选择对网站视觉效果和用户体验至关重要。Gatsby作为流行的静态站点生成器，提供了灵活的方式来集成本地字体文件。本文将详细介绍如何在Gatsby项目中高效地使用本地字体，包括字体文件准备、性能优化和实际应用。

准备工作

在开始之前，请确保：

已经创建好Gatsby项目
准备好需要使用的字体文件（常见格式为.woff2和.woff）

字体文件准备

选择合适的字体格式

Web字体有多种格式，推荐优先使用以下两种：

WOFF2：现代浏览器广泛支持，压缩率最高
WOFF：兼容性更好，压缩率次于WOFF2

如果可能，优先选择可变字体(Variable Fonts)，它可以在单个文件中包含多种字重和样式，减少HTTP请求数量。

字体文件组织

建议将字体文件放置在项目根目录下的static/fonts文件夹中。Gatsby在构建时会自动将static目录下的内容复制到最终输出的public目录中。

例如，我们可能这样组织字体文件：

static/
  └── fonts/
      ├── Inter-roman.var.woff2
      └── Inter-italic.var.woff2

性能优化：字体预加载

为了提升页面加载性能，特别是首屏内容的渲染速度，我们应该预加载关键字体资源。

实现字体预加载

在项目根目录创建或修改gatsby-ssr.js文件，添加以下内容：

import * as React from "react"

export const onRenderBody = ({ setHeadComponents }) => {
  setHeadComponents([
    <link
      rel="preload"
      href="/fonts/Inter-roman.var.woff2"
      as="font"
      type="font/woff2"
      crossOrigin="anonymous"
      key="interFont"
    />,
  ])
}

这段代码会在HTML的<head>部分添加预加载指令，浏览器会优先加载这些字体资源。

在CSS中使用本地字体

定义@font-face规则

创建一个全局CSS文件（如global.css），定义字体规则：

@font-face {
  font-family: 'Inter var';
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
  font-named-instance: 'Regular';
  src: url(/fonts/Inter-roman.var.woff2) format("woff2");
}

关键参数说明：