字体踩坑

觉得还是有必要单独为此记录一篇，这是在近日几天被这个问题折腾之后的决定。
先从这里开始说吧。

ヒラギノ明朝 Pro

是的，本来觉得字体的选择是一个非常简单的问题，也是重构站点之初最先着手的问题之一，由于所需的字体内容不多，网上搜罗一番后尝试了几个选项，就选择了其中一款还算顺眼的字体。现在想来这个最初的方案确实草率了，其实这都不能算上方案，只是一个选择，再加上缺少frontend的sense，后续出现了诸多的问题。

在选择字体之后，然后顺利demo，丝滑部署，一切看似非常ok的情况下，登陆了Win试着看下效果，才发现自己忘记了兼容性的问题😱，指定的字体完完全全没有被渲染。尤其在Edge下，Sidebar的字体还因为还原了最初的方案被分段了，orz。

兼容性的问题不仅仅出现在字体方面，在css多个选项上也出现了与Chrome下的不同效果。好在css的问题相对还比较好解决，但如果要实现跨平台跨浏览器的字体统一还是需要走自定义的方式来做，毕竟hexo的external字体配置虽然可以通过三方字体服务器来做，但在目前默认的google库中并没有合适的选择。

秀英明朝 OTF

既然可以自定义，当然也可以有别选择，在各大网站辛苦搜索一番后，终于找到一个更合适的字体。可惜只有OTF格式，不过也可以试一下。
接下来就是通过hexo来实现自定义字体的加载，这里就简述下方法。

• 首先是在主题目录的source文件夹下创建一个fonts的目录，把下载的字体放入即可
• 然后需要添加一个自定义的styl文件，按照网上的教程，大多指向的是主题目录下source/css/_custom/custom.styl这个地址，但从Next某个7版本后，_custom目录被移除，在GH的issue中再看看有没有替代方案 ，还果真有，文件地址可以转移到站点目录下的source/_data/styles.styl
• 继续在文件中定义font-face，这步比较简单，定义下名字，不同的字体格式，format不同的配置，最后修改url指向第一步的安装路径即可
• 配置文件指定时，external需要设置为false

本地测试比较顺利，但部署之后，发现ios端渲染有延迟，pc端基本无法渲染，猜测是字体大小的问题，一看，发现整个字体文件竟然达到29M！🙄，只能继续求索。

font-spider

字体压缩可以是想到最直接的解决方案。目前普遍的字体压缩方案就是font-spider，通过网页实际使用的文字进行按需压缩，对于非body类的网页通用字体，是比较好的解决方案。
有几点需要注意：

• 字体支持类型不包括otf，最好采用静态网站格式
• 需要用css进行目标字体定义（本身使用的就是font-face，不需要额外操作）
• 可能需要涉及对html的更改，例如css目录，font目录等
• 竖排文字对于标点符号会有特殊情况，需要手动载入，例如「」与﹁﹂

由于之前的采用的字体只有otf，所以再是一番搜寻，幸运地找到了同款字体的更新版本，来自wx：lxgwshare。

伊吕波歌 平仮名： いろはにほへと・ちりぬるを・わかよたれそ・つねならむ・うゐのおくやま・けふこえて・あさきゆめみし・ゑひもせす 片仮名： イロハニホエト・チリヌルヲ・ワカヨタレソ・ツネナラム・ウヰノオクヤマ・ケフコエテ・アサキユメミシ・ヱヒモセス 简体： 轻轻的我走了，正如我轻轻的来； 我轻轻的招手，作别西天的云彩。 那河畔的金柳，是夕阳中的新娘； 波光里的艳影，在我的心头荡漾。

看上去还不错，效果符合预期，直接安排！

压缩过程比较简单，顺利搞定。不得不感慨一下，小小的字体，过程竟也波澜不惊，还是多多记录下来，不给未来的自己留坑～