Web字体本地化的一种方案

原来好好的svg字体标准多年前被废弃了，各种主流的当下二进制字体格式似乎都被版权保护着，其源码格式非常复杂，虽然理论上也是开源的，但是因为它设计的非常反人类，就像chrome的源代码一样（但是chromium属于是高内聚低耦合的模式，虽然复杂，但是性能优越），字体比如ttf这类就是故意恶心人了，故意把标准格式设计的异常复杂，让普通开发者没办法自定义属于自己的设计模式，只能老老实实用他们推荐的生态（比如说什么fontforge编辑器什么的）来搞开发，从而达到盈利的目的。

我们在建站，开发网页的时候很多时候都需要造一个字体库，虽然用svg图标也能满足需求，但是为了整个工程的高内聚低耦合，方便管理维护，很多时候最好的图标设计是，先在unicode中寻找需要的图标比如emoji类，然后为这个字体图标单独设计一套公司自己的形状样式，制作成ttf或者otf字体文件，这样子，方便字体库的插拔：想替换另一套字体文件只需一步，甚至兼容轻量化平台（删掉字体文件，用系统默认的unicode字体）。

所以说，设计字体文件是很常见的一件事情，但是现在的现状就是字体标准厂商为了保护版权，恶意复杂化字体格式，这样的开源和闭源有什么区别呢？以前好端端的svg格式都不给用了。

好在现在有一种取舍的办法可以通过一个库把svg字体转换成ttf字体：npm install svg2ttf -save-dev。这个nodejs库可以一键把deprecated的svg字体转换成ttf文件。在我们的代码仓库中，svg图标存储（注意不是svg字体）需要一定的格式限制，比如下面这样：

代码语言：SVG

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 1000" fill="white" stroke="black" stroke-width="6"><path unicode="⬆"d="M 194.919 262 L 807.438 262.004 L 807.686 333.086 L 195.895 333.083 L 194.919 262 Z M 184.879 691.529 L 506.803 384.059 L 825.103 694.854 L 772.3 746.939 L 505.018 476.945 L 232.292 739.39 L 184.879 691.529 Z"opacity="0.5" /></svg>

这是一个标准的svg图片，只是其中需要新加一个unicode属性，它到时候在转换之后的svg字体中有用，现在也要加上，不影响。然后viewBox设置成和汉字一样的正方形尺寸1000x1000.。然后最好保留一个path，其中路径指令最好只使用线段和二次被塞尔曲线，因为ttf格式只支持直线和二次曲线，不支持其它的指令（这样也是为了性能着想）。最后这个svg图片的其它属性随意设置，怎么方便怎么来。现在单独建立一个fonts文件夹专门用来放svg图片，由于svg的开源属性，非常方便更新编辑，有各种各样免费好用的工具，这里推荐PWA网页app：https://boxy-svg.com/app，非常清凉好用。

现在，我们需要一个脚本，来把所有的svg文件打包烘焙成一个ttf文件：

代码语言：javascript

const fs = require('fs').promises;
const svg2ttf = require('svg2ttf');async function font() {const svgs = await fs.readdir('./src/assets/')let glyphs = await Promise.all(svgs.map(async (svg) => {svg = await fs.readFile('./src/assets/' + svg, 'utf-8')const path = svg.match(/<path[\s>][^>]*\/?>/g)[0];const glyph = path.replace('<path', '<glyph')return glyph}));glyphs = glyphs.join('\n')console.log(glyphs)const svgFont = `<svg xmlns="http://www.w3.org/2000/svg"><defs><font horiz-adv-x="1000"><font-face font-family="myfont" units-per-em="1000" ascent="1000" descent="0" />${glyphs}</font></defs></svg>`const ttf = svg2ttf(svgFont).buffer;await fs.writeFile('./myfont.ttf', ttf);
}font()// Optionally, you can create a custom glyph set by combining multiple SVGs (characters)

这里的代码通过node执行，其逻辑是，将fonts文件夹下面的所有的svg独取出来，封装成一个标准化的svg字体格式字符串，最后通过svg2ttf库来烘焙字体。

代码中先通过fs库读取目录下所有文件，然后读取每个svg的<path>，直接替换成<glyph>，最后拼接在一起，最外层再套一个<svg>就好了。最终输入到svg2ttf库生成想要的文件。

通过这种方式，可以避免依赖于什么在线字体编辑器或者本地编辑器，而是保留了原始的设计稿svg，方便随时修改。每次有图标库更新的时候就运行一下这段脚本就好了。