大家好，很高兴又见面了，我是"高级前端进阶"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发，您的支持是我不断创作的动力。
什么是 fontsourceSelf-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// yarnyarn add @fontsource/open-sans// pnpmpnpm 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/
