npm 包 buildfont 使用教程-JavaScript中文网-JavaScript教程资源分享门户

如果你曾经对于前端中字体的使用感到困扰，那么 npm 包 buildfont 就是你需要的利器。buildfont 是一个可用于将 SVG 文件转化为图标字体的 npm 包，它可以大大简化前端开发者在使用字体方面的操作。本文将介绍 buildfont 的使用教程，让你可以轻松将 SVG 文件转化为字体图标。

安装

第一步是安装 buildfont，运行以下 npm 命令即可：

npm install buildfont

安装完成后，你就可以在代码中引入 buildfont 进行使用了。

使用

buildfont 的使用主要分为以下几步：

准备 SVG 文件

首先需要准备好你所需要转化的 SVG 文件。可以在本地建立一个文件夹，并将所有需要转化的 SVG 文件存放在其中。

配置 buildfont

在构建字体之前，需要先配置 buildfont。创建一个名为 config.json 的文件，并将以下内容拷贝进去：

{
  "fontName": "iconfont",
  "src": "./src",
  "dest": "./dist",
  "startCodepoint": 0xEA01,
  "templates": ["css", "scss"]
}

配置文件中，共包含了五个参数：

fontName：生成的字体名称，也是生成的 CSS 文件中 @font-face 规则的 font-family。
src：存放 SVG 文件的路径。
dest：生成字体文件及样式文件的路径。
startCodepoint：生成字体文件的起始 Unicode 码点。
templates：生成的样式文件格式，支持 css 和 scss 两种格式。可选。

根据你的具体需求修改这些参数，并将 config.json 放置在项目根目录下。

运行 buildfont

运行以下命令来生成字体：

buildfont --config config.json

等待运行完毕后，在 ./dist 目录下会生成名为 iconfont.ttf、iconfont.woff、iconfont.woff2 的字体文件，以及 iconfont.css 或 iconfont.scss 样式文件。

引用字体和图标

在页面中引入生成的样式文件和字体文件，并通过 content 属性为字体图标指定 Unicode 码点即可。例如：

-- -------------------- ---- -------
--------- -----
------
------
  ----- ---------------- ---------------------------
  -------
    ----- -
      ------------ -----------
      ---------- -----
    -
  --------
-------
------
  -- ------------------------
-------
-------

示例代码

如果还没有一个 SVG 文件进行尝试，可以使用以下示例代码来进行练习。

SVG 文件

为了让本教程能够被更直观的理解，SVG 文件来自阿里巴巴的矢量图标库。

在一个名为 ./src 的文件夹中，创建一个名为 my-icon.svg 的 SVG 文件，拷贝以下内容进去：

<svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
  <path d="M938.707 139.293c-18.745-18.745-49.137-18.745-67.882 0L483 506.118V68.786c0-26.51-21.49-48-48-48s-48 21.49-48 48v437.332L152.175 139.293c-18.745-18.745-49.137-18.745-67.882 0s-18.745 49.137 0 67.882L435.883 683.118c9.372 9.372 21.82 14.059 34.268 14.059s24.896-4.686 34.268-14.059L938.707 207.175c18.745-18.745 18.745-49.136 0-67.882z"></path>
</svg>

config.json 文件

创建一个名为 config.json 的文件，拷贝以下内容进去：

{
  "fontName": "iconfont",
  "src": "./src",
  "dest": "./dist",
  "startCodepoint": 0xEA01,
  "templates": ["css"]
}

HTML 文件

在一个名为 index.html 的文件中，拷贝以下内容进去：

-- -------------------- ---- -------
--------- -----
------
------
  ----- ---------------- ---------------------------
  -------
    ----- -
      ------------ -----------
      ---------- -----
    -
  --------
-------
------
  -- ------------------------
-------
-------

生成字体

在终端输入以下命令，生成字体：

buildfont --config config.json

在 ./dist 目录下可以找到生成的字体文件和样式文件。

预览效果

用浏览器打开 index.html 文件，就可以看到一个漂亮的图标了。

总结

buildfont 是一个十分方便实用的 npm 包，可以帮助前端开发者轻松地将 SVG 文件转化为图标字体，并对字体进行管理。希望本文对你在前端中使用字体方面有所帮助，也欢迎各位前端开发者共同分享自己在前端开发中的心得与体会。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/buildfont