如果你曾经对于前端中字体的使用感到困扰，那么 npm 包 buildfont 就是你需要的利器。buildfont 是一个可用于将 SVG 文件转化为图标字体的 npm 包，它可以大大简化前端开发者在使用字体方面的操作。本文将介绍 buildfont 的使用教程，让你可以轻松将 SVG 文件转化为字体图标。
安装
第一步是安装 buildfont，运行以下 npm 命令即可：
--- ------- ---------
安装完成后，你就可以在代码中引入 buildfont 进行使用了。
使用
buildfont 的使用主要分为以下几步：
准备 SVG 文件
首先需要准备好你所需要转化的 SVG 文件。可以在本地建立一个文件夹，并将所有需要转化的 SVG 文件存放在其中。
配置 buildfont
在构建字体之前，需要先配置 buildfont。创建一个名为 config.json 的文件，并将以下内容拷贝进去：
- ----------- ----------- ------ -------- ------- --------- ----------------- ------- ------------ ------- ------- -
配置文件中，共包含了五个参数：
fontName：生成的字体名称，也是生成的 CSS 文件中 @font-face 规则的 font-family。src：存放 SVG 文件的路径。dest：生成字体文件及样式文件的路径。startCodepoint：生成字体文件的起始 Unicode 码点。templates：生成的样式文件格式，支持 css 和 scss 两种格式。可选。
根据你的具体需求修改这些参数，并将 config.json 放置在项目根目录下。
运行 buildfont
运行以下命令来生成字体：
--------- -------- -----------
等待运行完毕后，在 ./dist 目录下会生成名为 iconfont.ttf、iconfont.woff、iconfont.woff2 的字体文件，以及 iconfont.css 或 iconfont.scss 样式文件。
引用字体和图标
在页面中引入生成的样式文件和字体文件，并通过 content 属性为字体图标指定 Unicode 码点即可。例如：
--------- -----
------
------
----- ---------------- ---------------------------
-------
----- -
------------ -----------
---------- -----
-
--------
-------
------
-- ------------------------
-------
-------示例代码
如果还没有一个 SVG 文件进行尝试，可以使用以下示例代码来进行练习。
SVG 文件
为了让本教程能够被更直观的理解，SVG 文件来自阿里巴巴的矢量图标库。
在一个名为 ./src 的文件夹中，创建一个名为 my-icon.svg 的 SVG 文件，拷贝以下内容进去：
---- ---------- - ---- ----- ----------------------------------- ----- ----------- ------------------------------------------- ----- ----------------------------------------- -------- ------------------ ------------------------------------------- --------- ------ - -------------- ------------- ----- ----- ------ ------ ------------------- --------------------- --------------------- ------------- ------------------ ------
config.json 文件
创建一个名为 config.json 的文件，拷贝以下内容进去：
- ----------- ----------- ------ -------- ------- --------- ----------------- ------- ------------ ------- -
HTML 文件
在一个名为 index.html 的文件中，拷贝以下内容进去：
--------- -----
------
------
----- ---------------- ---------------------------
-------
----- -
------------ -----------
---------- -----
-
--------
-------
------
-- ------------------------
-------
-------生成字体
在终端输入以下命令，生成字体：
--------- -------- -----------
在 ./dist 目录下可以找到生成的字体文件和样式文件。
预览效果
用浏览器打开 index.html 文件，就可以看到一个漂亮的图标了。
总结
buildfont 是一个十分方便实用的 npm 包，可以帮助前端开发者轻松地将 SVG 文件转化为图标字体，并对字体进行管理。希望本文对你在前端中使用字体方面有所帮助，也欢迎各位前端开发者共同分享自己在前端开发中的心得与体会。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/buildfont