一.背景
前端开发的同学,我们经常会碰到需要还原设计稿中的特殊字体.这时,我们可能会采用两种方案
1.使用photoshop将文本图层单独导出成图片; 2.直接引入改字体的字体库.ttf文件
首先第一种方案的缺点...,使用图片代替文字,制作和维护的成本很高,前期切图,合并雪碧图比较繁琐,后期修改和维护更是麻烦.同时使用图片,会带来更多的宽带消耗.用户体验方面,用户无法进行文字的选择,复制等操作,体验也不好.
...二.浏览器对字体的支持
不同浏览器对字体的支持不同,所以我们要对不同的浏览器制作不同的字体.下图是浏览器对字体的支持情况.其中N为不支持,P为部分支持,Y为支持.
?.../demo/*.html
页面依赖的字体将会自动压缩好,原来几M的字体文件现在只剩下几k了, 是不是很爽呢.
4.使用gulp,grunt插件
除了直接进行编译,font-slider还提供了gulp...使用fontmin可以按需提取字体中的部分字型,最小化打包字体,自动生成 WebFont 字体文件(ttf/woff/eot/svg)和 CSS 文件, 并可利用 @font-face 将自定义字体呈现到网页中