在最新项目中,由于要频繁使用艺术字,
而用户设备没有此字体,因此以往的经验都是使用图片...
所以在同事的瞩目期许之下,我开始实验研究这个问题的解决方案
1. 直接使用字体文件
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 那个)
但是随着项目发布,还是出现了问题,由于字体文件过大(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 达到的效果是一样的,但个人觉得要方便很多,
先使用源字体玩耍,待发布时压缩一下,然后就不用管了,最多删掉新生成的一个文件夹
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 的,实在不好总结。
所以最终只得和设计达成一致,使用什么字体先让前端试试能不能压缩,不能就换个字体,无奈呀...
有去查找些资料,但情况太过复杂,解决方案有改写 gulp 的,改写 IIS 的,实在不好总结。
所以最终只得和设计达成一致,使用什么字体先让前端试试能不能压缩,不能就换个字体,无奈呀...