我想使用 npm 安装字体，例如 Open Sans 或 Roboto。 如果我在 npm 上搜索 Open Sans 并过滤每月下载量超过 1000 次的软件包，我会找到一个完整的列表。我不确定在这里选择哪个来源，有些没有得到很好的维护，而且没有一个来自字体的原始来源，在这种情况下是 google。
我注意到字体是 often 通过指向 fonts.googleapis 的直接链接使用的。我希望拥有字体的本地副本以便能够离线开发。有没有通过 npm 安装字体的常用方法？还是有其他我不知道的自动字体下载工具？
【问题讨论】：
我用typefacesyarn add typeface-roboto
然后只需使用require("typeface-roboto") / import "./typeface-roboto" 或您选择的任何字体。
我希望这是您正在寻找的答案？
使用fontsource，现在不推荐使用字体。
yarn add @fontsource/open-sans // npm install @fontsource/open-sans
然后在您的应用入口文件或站点组件中，将其导入。例如在 Gatsby 中，您可以选择将其导入到布局模板 (layout.js)、页面组件 (index.js) 或 gatsby-browser .js。
import "@fontsource/open-sans" // Defaults to weight 400 with all styles included.
Fontsource 允许您选择权重甚至个别样式，从而将有效负载大小缩减到最后一个字节！利用 CSS unicode-range 选择器，所有语言子集都被考虑在内。
import "@fontsource/open-sans/500.css"; // All styles included.
import "@fontsource/open-sans/900-normal.css"; // Select either normal or italic.
或者，可以通过 SCSS 导入相同的解决方案！
@import "~@fontsource/open-sans/index.css";
@import "~@fontsource/open-sans/300-italic.css";
【讨论】：
嗨
-normal 后缀已被弃用；仅加载普通样式时必须将其关闭。 github.com/fontsource/fontsource/blob/main/CHANGELOG.md#40x
字体项目现在是deprecated，其后继项目是fontsource。
在使用上没有太大区别。
安装：
yarn add @fontsource/open-sans // npm install @fontsource/open-sans
进口：
import "@fontsource/open-sans"
参考：
body {
font-family: "Open Sans";
}
【讨论】：