前言
对于 Web 前端开发者来说，iconfont 是一个十分重要的元素，它可以为网页添加独特的图标，减小页面的加载速度，提升用户体验。本文探讨了 grunt-webfont 这一 npm 包的使用方法，以便于大家更加方便地管理和使用自己的 iconfont。
简介
grunt-webfont 是一个好用的 Grunt 插件，可以将 SVG 图标自动转化为字体图标。使用这个 npm 包，我们不仅可以修改字体的格式，还可以配置字体的命名、创造符号的访问代码等等。
安装
第一步，我们需要确保本机已经安装了 grunt，如果没有，请先安装：
npm install -g grunt-cli
第二步，安装 grunt-webfont 插件：
npm install grunt-webfont --save-dev
使用
当插件安装完成后，我们就可以在 Gruntfile.js 里使用这个插件。下面是一个例子：
-- -------------------- ---- -------
-------------- - --------------- -
------------------
-------- -
------ -
---- ----------------------
----- -----------------
-------- ---------------
-------- -
----- ----------------
------ -------
----------- -------
---------------- -
------------ -------
-
-
-
-
---
------------------------------------
----------------------------- -------------
--把上面的代码粘贴到 Gruntfile.js 的文件中即可使用。我们需要修改 webfont 任务的选项以满足我们的需求：
src：SVG 图标的源路径。dest：生成的字体文件的目标路径。destCss：生成的CSS文件的目标路径。options.font：字体名称，可以别名，建议使用小写字母和短横线分隔符。options.types：字体类型。设置为 "woff" 可以产出 "woff" 格式的字体文件。options.stylesheet：样式类型。可以是 "css" 、"less" 或者 "scss"。options.templateOptions.classPrefix：自定义 CSS 类前缀。
执行 grunt 命令，Grunt 会自动在指定的路径下生成字体文件和样式文件。
示例
本示例使用 Web 字体宝库的下载好的 SVG 图标，手动放置在 src 的文件夹中。
-- -------------------- ---- -------
-------------- - --------------- -
------------------
-------- -
------ -
---- ------------
----- --------------
-------- ------------
-------- -
----- ---------------
------ -------
----------- -------
---------------- -
------------ -------
-
-
-
-
---
------------------------------------
----------------------------- -------------
--上面的例子中，Grunt 会将所有 src 下的 SVG 图标转化为字体文件和样式文件，然后都会被放在 dist 目录下。
结语
很多前端开发者使用 Web 字体库和图标的时候，总是面临着怎么修改、如何制作和使用 Web 字体的问题，而外部工具总是比较麻烦。通过使用 grunt-webfont 这个 npm 包，我们就可以非常方便地解决这些问题，提高我们工作的效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/72854