如何使用 npm 安装字体？

How do install fonts using npm?

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

我注意到字体是 often 通过直接 link 到 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 允许您 select 权重甚至个人样式，允许您将有效负载大小减少到最后一个字节！利用 CSS unicode-range select 或者，所有语言子集都被考虑在内。

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";

字体来源

字体项目现在是 deprecated and its successor is fontsource。

用法

在使用上没有太大区别

安装：

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

导入：

import "@fontsource/open-sans"

参考：

body {
  font-family: "Open Sans";
}