前端项目优雅引入自定义字体：使用 Fontsource 完全指南

前言

在前端项目中，使用自定义字体是提升 UI 设计品质的重要手段。然而，传统的 @font-face 方案需要手动下载字体文件、配置路径、处理格式兼容性，既繁琐又容易出错。

Fontsource 的出现完美解决了这些问题！它是一个开源的字体管理库，提供 900+ 开源字体 的 NPM 包化方案，支持自动构建、按需加载和 TypeScript 类型提示。本文将带你彻底掌握 Fontsource 的使用技巧！

1. Fontsource 的核心优势

1.1 对比传统方案

方案	优点	缺点
Google Fonts CDN	简单易用	依赖外部资源，隐私合规问题
手动 @font-face	完全可控	需处理多格式、路径、缓存
Fontsource	自动化、npm 集成	仅支持开源字体

1.2 为什么选择 Fontsource？

🌟 一键安装：通过 npm/yarn/pnpm 直接引入字体
🚀 按需加载：只打包使用的字符集（支持 subsetting）
🔒 隐私友好：无需依赖第三方 CDN
⚡ 性能优化：自动生成静态资源并缓存

2. 快速上手

2.1 安装字体包

在项目中安装你需要的字体（以 Inter 为例）：

bash 复制代码

# 使用 npm
npm install @fontsource/inter

# 使用 yarn
yarn add @fontsource/inter

# 使用 pnpm
pnpm add @fontsource/inter

2.2 在项目中引入

全局引入（推荐）

在 CSS 或全局样式文件中导入：

scss 复制代码

/* src/styles/global.css */
@import '@fontsource/inter'; /* 默认 weight 400 */
@import '@fontsource/inter/500.css'; /* weight 500 */
@import '@fontsource/inter/700.css'; /* weight 700 */

按需引入（CSS-in-JS）

javascript 复制代码

// 在 React 组件中
import '@fontsource/inter/500.css';

function MyComponent() {
  return (
    <h1 style={{ fontFamily: 'Inter', fontWeight: 500 }}>
      Hello Fontsource!
    </h1>
  );
}

3. 高级用法

3.1 动态加载字体

通过 FontFace API 实现异步加载：

ini 复制代码

// 动态加载字体
const font = new FontFace('Inter', 'url(@fontsource/inter/files/inter-latin-400-normal.woff2)');
document.fonts.add(font);
font.load().then(() => {
  document.body.style.fontFamily = 'Inter';
});

3.2 子集化（Subsetting）

减少字体文件体积，只加载特定字符集：

java 复制代码

// 在构建工具（如 Webpack）中配置
module.exports = {
  plugins: [
    new FontsourceWebpackPlugin({
      subsets: ['latin', 'cyrillic'],
    }),
  ],
};

3.3 多语言支持

加载特定语言的字体变体：

scss 复制代码

/* 加载日文变体 */
@import '@fontsource/noto-sans-jp/japanese-400.css';

4. 性能优化建议

4.1 使用 `font-display: swap`

避免 FOIT（Flash of Invisible Text）：

css 复制代码

/* 全局样式 */
body {
  font-family: 'Inter', sans-serif;
  font-display: swap;
}

4.2 预加载关键字体

在 HTML 的 <head> 中添加：

ini 复制代码

<link
  rel="preload"
  href="@fontsource/inter/files/inter-latin-400-normal.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>

4.3 使用可变字体（Variable Fonts）

部分字体支持可变宽度（如 Inter Variable）：

bash 复制代码

npm install @fontsource-variable/inter

css 复制代码

@import '@fontsource-variable/inter';
body {
  font-family: 'Inter Variable', sans-serif;
  font-variation-settings: 'wght' 400;
}

5. 常见问题解答

Q1: Fontsource 支持哪些字体？

所有 Google Fonts 中的 开源字体 （如 Inter、Roboto、Open Sans 等），完整列表见 Fontsource 官网。

Q2: 如何解决字体未生效？

检查：

是否正确安装并导入了字体包
是否在 CSS 中正确声明 font-family
浏览器控制台是否有 404 错误（路径问题）

Q3: 能否在 Next.js 中使用？

可以！ 在 _app.js 中全局导入：