npm - 如何使用 npm 安装字体？

Question

我想用npm安装字体，例如Open Sans或 Roboto .
如果我在 npm 上搜索 Open Sans 并过滤每月下载量超过 1000 的包，我会找到一个完整的列表。我不确定在这里选择哪个来源，有些没有得到很好的维护，而且没有一个来自字体的原始来源，在这种情况下，谷歌。

npm-font-open-sans

typeface-open-sans

open-sans-all

open-sans-fontface

opensans-npm-webfont

我注意到字体是 often通过直接链接到 fonts.googleapis 使用。我更愿意拥有字体的本地副本，以便能够离线开发。有没有通过npm安装字体的常用方法？或者还有其他我不知道的自动字体下载工具吗？

Answer 1

我用 typefaces yarn 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";