在前端开发中，使用字体图标可以提高页面的视觉效果，同时也能提高页面的性能。而 font-atlas 就是一个可以帮助我们更好地使用字体图标的 npm 包。
什么是 font-atlas
font-atlas 是一个将 SVG 字体转换为图像的工具，它可以将 SVG 字体转换为只包含字形的图片，这样就可以通过 CSS 中的 background-image 将字形呈现到页面上。相比于传统的字体引入方式，font-atlas 能够减少 HTTP 请求次数，提高页面性能。
如何安装 font-atlas
在命令行中输入以下命令即可安装 font-atlas：
npm install font-atlas --save-dev
如何使用 font-atlas
准备工作
首先，我们需要有一个 SVG 字体文件。如果没有，可以在一些在线图标库中下载，例如 Font Awesome。
然后，我们需要使用工具将 SVG 字体文件转换为 font-atlas 支持的字体类型。font-atlas 支持的字体类型包括 TTF、WOFF、WOFF2、EOT 等，可以通过 Font Squirrel 或者 Online Font Converter 进行转换。
使用 font-atlas
将字体文件转换为 font-atlas 支持的字体类型后，就可以开始使用 font-atlas 了。
首先，将字体文件放到项目目录下，例如 src/assets/fonts/my-font.ttf。
然后，在需要使用字体图标的样式文件中引入 font-atlas：
@import "~font-atlas/font-atlas.css";
最后，使用 font-atlas 提供的 CSS 类名和 Unicode 字符即可将字体图标呈现到页面上。例如，以下代码将 Font Awesome 中的 GitHub 图标呈现到页面上：
<i class="fa fa-github fa-lg"></i>
font-atlas 参数配置
配置文件
在项目中，可以通过在根目录下创建 font-atlas.config.js 文件来进行 font-atlas 的参数配置。
参数说明
iconPrefix
- 类型：string
- 默认值：
icon- - 描述：字体图标的前缀，用于避免与其他 CSS 类名冲突。
fontName
- 类型：string
- 默认值：
font-atlas - 描述：字体名称。
fontWeight
- 类型：string
- 默认值：
normal - 描述：字体的粗细程度。
fontStyle
- 类型：string
- 默认值：
normal - 描述：字体的风格。
fileName
- 类型：string
- 默认值：
atlas - 描述：字体图标所生成的图片的文件名。
imagePath
- 类型：string
- 默认值：
./ - 描述：字体图标所生成的图片的文件夹路径。
fontPath
- 类型：string
- 默认值：
./ - 描述：字体文件所在的文件夹路径。
formats
- 类型：array
- 默认值：
['ttf', 'woff', 'woff2', 'eot'] - 描述：字体文件的格式列表。
glyphs
- 类型：array
- 默认值：
[] - 描述：包含的字形列表。
示例代码
以下代码展示了一个 font-atlas.config.js 配置文件的示例：
-- -------------------- ---- -------
-------------- - -
----------- ------
--------- ---------------------
--------- ---------------
---------- --------------------
--------- ----------------------
-------- ------- ------- -------- -------
------- -
-------- -- --------
-------- -- ---------
-------- -- -------
-------- -- ---------
-------- -- -------------
-------- -- -----------
-------- -- -------------
------- -- --------------
-
--总结
通过 font-atlas，我们可以更高效地使用字体图标，同时也能提高页面性能。对于需要使用字体图标的项目，使用 font-atlas 是一个不错的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedaf6bb5cbfe1ea061102c