体验 WebFont，网页上的艺术字

在最新项目中，由于要频繁使用艺术字，

而用户设备没有此字体，因此以往的经验都是使用图片...

所以在同事的瞩目期许之下，我开始实验研究这个问题的解决方案

1. 直接使用字体文件

@font-face {
  font-family: 'xxxx';
  src: url('../img/汉仪秀英体简.TTF');
}
.font {
    font-family: 'xxxx', Arial, sans-serif;
}

该方案是能用的，因为使用的是微信不用考虑兼容性，
但是随着项目发布，还是出现了问题，由于字体文件过大(3.8M)，于是艺术字部分出现了先没有再为雅黑再为艺术字的过程，视觉效果相当不妙，
其次，由于其文件过大的问题，一个项目使用多个字体那就很“刺激”了。

2. 引用第三方字体库
a. 字体生成
以“有字库”为例，它只需引用对应的 js，选定一个 dom，该 dom 内的文字就变成了艺术字。
使用时要把用在那个域名加入白名单，过段时间再研究其源码，还是非常好用的。
DEMO：https://foreverz133.github.io/demos/single/FontFamily.html
WEB：http://www.youziku.com/onlinefont/index
b. 线上字体
以“阿里WebFont”为例，引用线上字体文件，可以压缩该文件只包含部分文字，
用起来还不错，但问题在于只有 7 个字体，有待寻找其他字体库
WEB：http://www.iconfont.cn/webfont/#!/webfont/index

3. 自己压缩字体文件(只选择部分文字进行打包)
我们采用的是 java 版，得安一个 java sdk，初期效果还不错，大约两百字的大小是 236K
WEB：https://github.com/forJrking/FontZip (下载 FontZip.jar 那个)

// -----------------------------------------------------------

// --------------------------------------- 2017/05/31 更新

4. 字蛛

它依赖于 nodeJS，和 3 达到的效果是一样的，但个人觉得要方便很多，

官网：http://font-spider.org/

先使用源字体玩耍，待发布时压缩一下，然后就不用管了，最多删掉新生成的一个文件夹

npm install font-spider -g // 安装

font-spider ./demo/*.html // 压缩

 

// -----------------------------------------------------------

// --------------------------------------- 2017/05/07 更新

 

后期有出现几次部分字体压缩后报错的情况，所以又重新研究了一番，

已遇到的主要报错有以下几种：

1. Failed to parse metrics in vhea
2. cmap: Failed to parse format 4 cmap subtable 0
3. invalid version tag

都是 OTS parsing error，一般直接调用文件是没问题的，但压缩后才开始报错，
有去查找些资料，但情况太过复杂，解决方案有改写 gulp 的，改写 IIS 的，实在不好总结。
所以最终只得和设计达成一致，使用什么字体先让前端试试能不能压缩，不能就换个字体，无奈呀...