大家好，很高兴又见面了，我是"高级前端?进阶?"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。

什么是 fontsource

Self-host Open Source fonts in neatly bundled NPM packages.

fontsource 是一个更新的 monorepo，其中包含打包到各个 NPM 包中的可自托管开源字体。自托管字体可以显著提高网站性能，因为其消除了使用 Google Fonts 等 CDN 时需要的额外 DNS 解析和 TCP 连接建立所造成的额外延迟，从而有助于防止简单网站的视觉加载时间加倍。

Google 经常在未经通知的情况下推送其字体的更新，从而干扰实时生产项目。fontsource 通过保持字体版本锁定，可以让开发者像管理任何其他 NPM 依赖项一样管理字体，同时保持隐私。

同时，fontsource 支持字体离线加载，此功能对于渐进式 Web 应用程序以及无法或只能有限访问互联网的情况非常有用。

目前 fontsource 在 Github 通过 MIT 协议开源，有超过 5k 的 star，是一个值得关注的前端开源项目。

如何使用 fontsource

首先通过相应的包管理工具进行下载：

npm install @fontsource/open-sans
// yarn
yarn add @fontsource/open-sans
// pnpm
pnpm add @fontsource/open-sans

接着在应用程序的入口文件、页面或站点组件中，使用包名称导入字体包。例如，要将 Open Sans 导入到 index.jsx 可以添加以下代码：

import "@fontsource/open-sans";
// Defaults to weight 400.

如果开发者只需要特定的字体粗细或样式，则可以单独导入以减少资源体积大小。Fontsource 允许开发者精确选择粗细和样式。要导入特定粗细或样式，请使用相应的导入。例如：

import "@fontsource/open-sans/500.css";
// Weight 500.
import "@fontsource/open-sans/900-italic.css";
// Italic variant.

导入字体后，开发者可以在 CSS 样式表、CSS 模块或 CSS-in-JS 中引用。使用与安装的字体包关联的字体系列名称，例如：

body {
 font-family: "Open Sans", sans-serif;
}

更多关于 fontsource 的用法和示例可以参考文末资料，本文不再过多展开。

参考资料

https://github.com/fontsource/fontsource

https://fontsource.org/docs/getting-started/install

https://in.pinterest.com/pin/installing-google-fonts-as-npm-packages-with-fontsource-tech-hyme-in-2024--882987070680232519/