前言
opentype-svg-loader 是一个能够将 OpenType 字体(.otf, .ttf) 转化为可用的 SVG 代码的 webpack loader。使用 opentype-svg-loader 可以在前端中使用字体图标，避免使用图片或繁琐的 SVG 编写。
本文将详细介绍 opentype-svg-loader 的使用方法及注意事项。
安装
使用 npm 进行全局安装：
npm install opentype-svg-loader --save-dev
使用
添加以下规则到 webpack.config.js 文件中：
-- -------------------- ---- -------
-
----- ---------
---- -
-
------- ---------------------
-
-
--
-
----- ---------
---- -
-
------- ----------------------
-------- -
--------- ------------
-
-
-
-其中 options 参数中可选参数为：
fontName(string) - 对于从.ttf文件中生成的字体文件，此选项可以用于指定字体名称。字体名称应该遵循 CSS 中的 font-family 规范。
在 HTML 中添加字体：
-- -------------------- ---- -------
------
-------
---------- -
------------ ---------
---- --------------------------
-- ------ --- ----- --- ----- --- ---- --
-
--------
-------
------
--- ------------------- ------------- ---------
-------示例
假设我们有一个 myfont.ttf 文件，其位置为 src/assets/fonts/myfont.ttf。我们可以在 CSS 中定义字体名称，并使用 opentype-svg-loader 在 webpack 中将其转化为 SVG。
@font-face {
font-family: 'myfont';
src: url('./assets/fonts/myfont.ttf');
}并在 HTML 中使用：
-- -------------------- ---- -------
------
-------
---------- -
------------ ---------
---- ---------------------------------
-
----- -
------------ ---------
---------- -----
-
--------
-------
------
---- ---------------------------
-------其中 .icon 类用于标识需要使用该字体的元素， 则为该字体的 unicode 代码。
注意事项
- opentype-svg-loader 目前不支持将颜色嵌入字体。因此，如果需要更改字体颜色，应该使用 CSS。
- opentype-svg-loader 只适用于 webpack 环境，不能直接在浏览器中使用。
- 在
.ttf文件经过转化为字体时，如果未指定fontName，则默认字体名称为font。
总结
opentype-svg-loader 是一个方便实用的 webpack loader，能够将 OpenType 字体文件转化为可用的 SVG 代码，使得在前端中使用字体图标变得更加容易方便。希望本文能够对读者有所帮助，提高前端开发效率。
参考资料
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600557f281e8991b448d509b