关于博客中字体的选择
困境
#c 问题 使用系统字体
上次的Hexo博客用的字体都是使用各个系统自带的，使用css中 font-family 来设置，按照优先级来使用字体。但是这样做有个问题，就是每个系统出来的效果都不一样，而且在Windows上实在找不到什么好看的（Mac和手机上可能好点，我的目标是全平台适配），大家电脑都装了的系统字体，因此，决定去找寻新的方法，可以使用自己的字体。
# font config of Hexo
font:
font_size: 16px
font_family: Georgia, -apple-system, 'Nimbus Roman No9 L', 'PingFang SC', \
'Hiragino Sans GB', 'Noto Serif SC', 'Microsoft Yahei', \
'WenQuanYi Micro Hei', 'ST Heiti', sans-serif
#d 中文字体体积
不同于英文字体，通常在1MB以下，通常为200-300KB，中文字体动辄会有10MB以上，因此体积会很大。
#c 问题 小水管带宽
在这个状况下，使用中文字体在网页就会变成一种奢望，根据统计，打开一个网站时，用户能接受的加载时间为 7 秒左右。 超过这个时间，用户就会丧失兴趣。 因此我的小水管带宽（我的服务器带宽为2Mb，换算成字节，为250KB/s）加载一个5MB的文件就需要20s，这是不可接受的。
应运而生的技术
Web Open Font Format (woff)
#d Web Open Font Format
这个格式使用了和ttf和otf不同的压缩编码方式，因此相比普通的ttf文件，文件体积会减少40%。
#c 问题 依旧存在
但是即使变小了，花费的时间依旧不可接受，只能缓解这个痛点而不能完全解决。
Font Spilt
#d 字体分割技术
使用字体分割技术，字体会被分割成为20KB大小的小文件，然后根据需要给用户传输需要的字体文件，因为常用字体通常只是字体文件中的字体的子集，而且一个页面不会包含所有的汉字，因此这个技术可以大大减少中文字体在网页中加载花费的时间。
#c 问题 依然很慢
使用 Maple Mono SC NF 这个字体的粗体，ttf文件为16MB左右，使用字体分割之后变成8MB (同时会转换为woff格式减少体积)。放入网页测试，我的网站依旧需要4s左右打开，我依旧不满意，这还是只是一个人访问我的网站。
#d 像素字体
突然想到，像素字体的体积会非常小，同时也看到有个博客在使用像素字体，效果还可以，因此蹦出了网站使用像素字体的想法
#e zpix字体分割 字体分割技术
zpix是Github上一款开源的像素字体，可以免费个人使用，这款字体包含中日韩(CJK)字符，ttf文件为8MB左右，通过字体分割和压缩，竟然只有1MB多，这还是包含了日韩的字符，因此加载的时候便会非常快。
经过字体分割之后，文件夹中包含字体小文件("./69c3ada366144ff962d29d754aeecbfd.woff2") 和 result.css，其中css文件类似下面的格式。可以看到通过range（里面有UTF-8的编码范围）就可以决定需要加载哪个字体文件。
@font-face {font-family:"Zpix";src:local("Zpix"), \
url("./69c3ada366144ff962d29d754aeecbfd.woff2") format("woff2"); \
font-style: normal;font-weight: 400;font-display: swap;unicode-range: \
U+9d7f-9e1e,U+9e24,U+9e27,U+9e2e,U+9e30,U+9e34,U+9e3b-9e3c,U+9e40,U+9e4d, \
U+9e50,U+9e52-9e54,U+9e56,U+9e59,U+9e5d,U+9e5f-9e62,U+9e65,U+9e6e-9e6f \
U+9e72,U+9e74-9e7d,U+9e80-9e81,U+9e83-9e86,U+9e89-9e8a,U+9e8c-9e91, \
U+9e94-9e9c,U+9e9e,U+9ea0-9ea5,U+9ea7-9eb3,U+9eb5-9eb7,U+9eb9-9eba,U+9ebc, \
U+9ebf-9ec3,U+9ec5-9ec8,U+9eca-9ecc,U+9ed0,U+9ed2-9ed3,U+9ed5-9ed7, \
U+9ed9-9eda,U+9ede,U+9ee1,U+9ee3-9ee4,U+9ee6,U+9ee8,U+9eeb-9eee,\
U+9ef0-9ef8,U+9efa,U+9efd,U+9eff-9f0a,U+9f0c,U+9f0f,U+9f11-9f12,U+9f14-9f16, \
U+9f18,U+9f1a-9f1f,U+9f21,U+9f23-9f2b,U+9f2d-9f2e,U+9f30-9f36, \
U+9f38,U+9f3a,U+9f3c,U+9f3f-9f43,U+9f45-9f4f,U+9f52-9f6f;}
@font-face {font-family:"Zpix";src:local("Zpix"), \
url("./03cfd03d967c6219ad2bb791787e1d09.woff2") format("woff2"); \
font-style: normal;font-weight: 400;font-display: swap;unicode-range: \
U+9bbe-9c7b,U+9c7d-9c7e,U+9c80,U+9c83-9c84,U+9c89-9c8a,U+9c8c,U+9c8f, \
U+9c93,U+9c96-9c99,U+9c9d,U+9caa,U+9cac,U+9caf,U+9cb9,U+9cbe-9cc2, \
U+9cc8-9cc9,U+9cd1-9cd2,U+9cda-9cdb,U+9ce0-9ce1,U+9ce3-9d7e;}
@font-face {font-family:"Zpix";src:local("Zpix"), \
url("./c4c114403acba1be70056b2db2869d48.woff2") format("woff2"); \
font-style: normal;font-weight: 400;font-display: swap;unicode-range: \
U+99e2-9a6b,U+9a72,U+9a83,U+9a89,U+9a8d-9a8e,U+9a94-9a95,U+9a99,U+9aa6, \
U+9aa9-9aaf,U+9ab2-9ab5,U+9ab9,U+9abb,U+9abd-9abf,U+9ac3-9ac4, \
U+9ac6-9aca,U+9acd-9ad0,U+9ad2,U+9ad4-9ad7,U+9ad9-9ade,U+9ae0,U+9ae2-9ae5, \
U+9ae7-9aea,U+9aec,U+9aee,U+9af0-9af8,U+9afa,U+9afc-9b02,U+9b04-9b07, \
U+9b09-9b0e,U+9b10-9b12,U+9b14-9b1e,U+9b20-9b22,U+9b24-9b2e, \
U+9b30-9b31,U+9b33-9b3a,U+9b3d-9b40,U+9b46,U+9b4a-9b4c,U+9b4e,U+9b50, \
U+9b52-9b53,U+9b55-9bbd;}
最终结果
#c 结果 网站秒开
通过上述技术的优化，网站上的页面几乎秒载入，实现了美观和速度兼顾的结果。