绍兴网站建设企业,wordpress多域名插件,品牌羽绒服排名前十,网站后期维护费用怎样版费在最新项目中#xff0c;由于要频繁使用艺术字#xff0c;而用户设备没有此字体#xff0c;因此以往的经验都是使用图片...所以在同事的瞩目期许之下#xff0c;我开始实验研究这个问题的解决方案1. 直接使用字体文件font-face {font-family: xxxx;src: url(../img/汉仪秀英…在最新项目中由于要频繁使用艺术字 而用户设备没有此字体因此以往的经验都是使用图片... 所以在同事的瞩目期许之下我开始实验研究这个问题的解决方案1. 直接使用字体文件 font-face {font-family: xxxx;src: url(../img/汉仪秀英体简.TTF);
}
.font {font-family: xxxx, Arial, sans-serif;
} 该方案是能用的因为使用的是微信不用考虑兼容性但是随着项目发布还是出现了问题由于字体文件过大(3.8M)于是艺术字部分出现了先没有再为雅黑再为艺术字的过程视觉效果相当不妙其次由于其文件过大的问题一个项目使用多个字体那就很“刺激”了。2. 引用第三方字体库a. 字体生成以“有字库”为例它只需引用对应的 js选定一个 dom该 dom 内的文字就变成了艺术字。使用时要把用在那个域名加入白名单过段时间再研究其源码还是非常好用的。DEMOhttps://foreverz133.github.io/demos/single/FontFamily.htmlWEBhttp://www.youziku.com/onlinefont/indexb. 线上字体以“阿里WebFont”为例引用线上字体文件可以压缩该文件只包含部分文字用起来还不错但问题在于只有 7 个字体有待寻找其他字体库WEBhttp://www.iconfont.cn/webfont/#!/webfont/index3. 自己压缩字体文件(只选择部分文字进行打包)我们采用的是 java 版得安一个 java sdk初期效果还不错大约两百字的大小是 236KWEBhttps://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 的实在不好总结。所以最终只得和设计达成一致使用什么字体先让前端试试能不能压缩不能就换个字体无奈呀... 转载于:https://www.cnblogs.com/foreverZ/p/6387251.html
