网页字体切片

在了解网页字体切片之前，先了解下 CSS 属性 ：unicode-range。

这个属性一般和 @font-face 一起使用。它的作用主要是用来限定 @font-face 中字体适用的字符范围。这个属性的值正如名称所示，是 unicode 值。 如果 @font-face 中不加这个属性，则表示所有字符都适用此字体。

假设在页面中引用了字体“更纱黑体”，但是只有“时光巷陌”这四个字符，为了让这四个字符使用更纱黑体，而加载整个更纱黑体字体到网页，这显然是不合适的。

针对上述情况，有两种解决方案：一种是提取字体子集，把更纱黑体.ttf 中的“时光巷陌”这四个字提取出来。但如果后续增加字符，这些字符就不能使用到更纱黑体，因为提取中的子集不包含它们。

第二种方法就是字体切片，这种方法动态加载使用到的字符字体文件。例如将一个更纱黑体.ttf文件，切割为10个小的字体资源文件，在第8个文件中，包含了“时光巷陌”四个字符，那就只需要加载第8个文件就可以了。那么如何让浏览器感知到在第八个字体文件中，包含了需要显示的字符呢？就是通过开头所说的 unicode-range 属性。

接下来开始具体的切片操作。

第一步，需要安装 Node 环境。安装好之后，新建一个文件夹：test，使用命令行进入到此文件夹，输入

npm init -y npm install --save-dev font-slice

第二步，创建 index.js 文件，粘贴下面代码，其中YourPath.ttf 替换为你的文件路径

const path = require("path"); const createFontSlice = require('font-slice'); createFontSlice({ // fontPath fontPath: path.resolve(__dirname, 'YourPath.ttf'), // outputDir outputDir: path.resolve(__dirname, './output'), })

第三步，执行这个 index.js ，输入

node index.js

命令执行完成之后在，就会看到有 fonts.css 和 切片后的字体生成了。

[font-slice](https://github.com/voderl/font-slice)