体验 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 的，实在很差总结。 因此最终只得和设计达成一致，使用什么字体先让前端试试能不能压缩，不能就换个字体，无奈呀...