字体内嵌

Base64编码引入方案

注意并非为使用直接引入ttf字体；而是指在一个CSS文件里使用离线字体，适用于在各类的Markdown编辑器里引入个人的CSS样式，更换显示字体。

一般而言我们获取的直接使用的字体方式大概都是这样的：

<style>
@import url('https://fonts.googleapis.com/css2?family=LXGW+WenKai+TC&display=swap');
</style>

实际上就是引入了一个新的CSS表，查看这个链接对应的内容，可以发现就是一堆CSS配置，因此我们直接提取这串配置，大概如下：

@font-face {
    font-family: 'LXGW WenKai TC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/lxgwwenkaitc/v5/w8gDH20td8wNsI3f40DmtXZb48uPRcYjfVkya1rPVMJ1s2xFdzxf8zbrG4pFHAjgWCOdOe9j.0.woff2) format('woff2');
    unicode-range: U+1f921-1f930, U+1f932-1f935, U+1f937-1f939, U+1f940-1f944, U+1f947-1f94a, U+1f950-1f95f, U+1f962-1f967, U+1f969-1f96a, U+1f980-1f981, U+1f984-1f98d, U+1f990-1f992, U+1f994-1f996, U+1f9c0, U+1f9d0, U+1f9d2, U+1f9d4, U+1f9d6, U+1f9d8, U+1f9da, U+1f9dc-1f9dd, U+1f9df-1f9e2, U+1f9e5-1f9e6, U+20024, U+20487, U+20779, U+20c41, U+20c78, U+20d71, U+20e98, U+20ef9, U+2107b, U+210c1, U+22c51, U+233b4, U+24a12, U+2512b, U+2546e, U+25683, U+267cc, U+269f2, U+27657, U+282e2, U+2898d, U+29d5a, U+f0001-f0005, U+f0019, U+f009b, U+f0101-f0104, U+f012b, U+f01ba, U+f01d6, U+f0209, U+f0217, U+f0223-f0224, U+fc355, U+fe327, U+fe517, U+feb97, U+fffb4;
  }

指定了woff2的地址以及适用范围，因此我们如果需要进行离线使用，则需要将上面的地址请求更换掉；然后指定为字体数据，可以使用：

@font-face {
    font-family: 'LXGW WenKai TC';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("data:font/woff2;base64,$BASE64String") format('woff2');
    unicode-range: U+1f921-1f930, U+1f932-1f935, U+1f937-1f939, U+1f940-1f944, U+1f947-1f94a, U+1f950-1f95f, U+1f962-1f967, U+1f969-1f96a, U+1f980-1f981, U+1f984-1f98d, U+1f990-1f992, U+1f994-1f996, U+1f9c0, U+1f9d0, U+1f9d2, U+1f9d4, U+1f9d6, U+1f9d8, U+1f9da, U+1f9dc-1f9dd, U+1f9df-1f9e2, U+1f9e5-1f9e6, U+20024, U+20487, U+20779, U+20c41, U+20c78, U+20d71, U+20e98, U+20ef9, U+2107b, U+210c1, U+22c51, U+233b4, U+24a12, U+2512b, U+2546e, U+25683, U+267cc, U+269f2, U+27657, U+282e2, U+2898d, U+29d5a, U+f0001-f0005, U+f0019, U+f009b, U+f0101-f0104, U+f012b, U+f01ba, U+f01d6, U+f0209, U+f0217, U+f0223-f0224, U+fc355, U+fe327, U+fe517, U+feb97, U+fffb4;
  }

这样去替换对应的字体数据，就将字体数据嵌入到CSS里了，从而绕过在各类Markdown编辑器中使用Electron框架导致的相对路径引入异常。