在前端开发中，字体在网页设计中扮演着重要的角色。然而，在选择和使用字体方面，往往存在很多问题。这时候，一个好用的工具就显得尤为重要。本文将介绍一个值得推荐的 npm 包 -- postcss-font-magician ，它可以让我们更加轻松地处理字体相关的问题。
什么是 postcss-font-magician
postcss-font-magician 是一个能够自动处理字体相关问题的插件，它可以完成以下功能：
- 自动引入所需字体文件
- 处理字体格式
- 解决字体权重
- 引入 Google 字体
在实际的项目中，我们只需要在使用 postcss 的情况下，在 postcss 插件列表中添加 postcss-font-magician 就可以了。接下来，我们就来详细了解如何使用它。
安装 postcss-font-magician
首先，我们需要在项目中安装 postcss 和 postcss-font-magician 两个包，可以使用以下命令进行安装：
npm install postcss postcss-font-magician --save-dev
这里使用了 --save-dev 参数，表示安装到开发依赖中。
配置 postcss
在安装完依赖后，我们需要在项目根目录下创建一个 postcss.config.js 文件，并编写以下内容：
module.exports = {
plugins: [
require('postcss-font-magician')({
// 配置项
})
]
}这里的 require() 函数加载了 postcss-font-magician 模块，并将其作为 postcss 的插件使用。
注意：如果项目中已经有了 postcss 的配置，我们需要在原来的基础上添加 postcss-font-magician 这个插件到 plugins 数组中。
配置项
接下来，我们需要对 postcss-font-magician 插件进行一些配置。常用的配置项如下：
formats
该配置项用于指定需要生成的字体格式。默认情况下，插件会自动探测浏览器支持的字体格式，并生成对应的字体文件。但是，我们也可以手动指定需要生成的格式，例如：
formats: ['eot', 'woff2', 'woff']
foundries
该配置项用于指定需要引入的字体来源。默认情况下，插件会自动引入 Google 字体，但是我们也可以手动指定其他字体来源。例如：
foundries: ['google']
variants
该配置项用于指定需要引入的字体变体。默认情况下，插件会自动引入相应的字体变体，但是我们也可以手动指定需要引入的变体。例如：
variants: {
'Open Sans': {
'300': [],
'400': [],
'600': []
}
}这里指定了引入 Open Sans 字体的 300、400 和 600 变体。
display
该配置项用于控制在 CSS 文件中生成的字体声明。默认情况下，插件会生成完整的字体声明，例如：
-- -------------------- ---- -------
---------- -
------------ ----- ------
----------- -------
------------ ----
---- -----------------------------------
---- ----------- ------- --------------------------
----------------------------------------- ----------------------------
------------------------------------ ----------------
----------------------------------- ---------------
-但是我们也可以指定只生成部分属性，例如：
display: 'swap'
这里指定在 CSS 文件中只生成 font-display: swap 属性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/46557