如何使用 npm 安装字体？

Posted 2023-03-15

【中文标题】如何使用 npm 安装字体？

【英文标题】：How do install fonts using npm?

【发布时间】：2018-05-27 22:29:17

【问题描述】：

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

npm-font-open-sans typeface-open-sans open-sans-all open-sans-fontface opensans-npm-webfont

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

【问题讨论】：

Downloading a Google font and setting up an offline site that uses it的可能重复

【参考方案1】：

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

【讨论】：

那么，我如何仅在特定标签中使用？

离开我的头顶，css

从 4.0.x 版开始，-normal 后缀已被弃用；仅加载普通样式时必须将其关闭。 github.com/fontsource/fontsource/blob/main/CHANGELOG.md#40x

【参考方案2】：

字体来源

字体项目现在是deprecated，其后继项目是fontsource。

用法

在使用上没有太大区别。

安装：

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

进口：

import "@fontsource/open-sans"

参考：

body 
  font-family: "Open Sans";