css特殊字体处理

遇到特殊字体，在网站用得比较多比如0…1000等排序是特殊字体，还有各种动态字体。
这时候可以找美工要个字体SFNT格式的就行。
然后在用css的font-face引入

1
2
3
4
5
6
7
8
@font-face {
        font-family: 'qingchun';
        src: url('../data/qingchun-s.eot');
        src: url('../data/qingchun-s.eot?#iefix') format('embedded-opentype'),
        url('../data/qingchun-s.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }


经过试验发现除了.ttf之外，还需要.eot来兼容IE浏览器。
接下来你会发现你的字体太大了，有1mb多，加载要花4s。= =
这时候你就想压缩字体，这里推荐sfnttool,
java环境要求1.8.x以上版本。
编译相关的文件后，在终端下执行
1
java -jar YOUR_LIB_PATH/sfnttool.jar -s '需要的文字' YOUR_FONT_PATH/字体.ttf 字体-new.ttf

编译后的jar文件 ，字体存放路径， 新字体名字。
另外还有一个在线字体转换工具，将你的.ttf文件生成.eot文件onlinefontconverter

后记

后面发现转换字体还可以用[font-spider](https://github.com/aui/font-spider);
字体压缩可以用[fontmin](https://github.com/ecomfe/fontmin/),
[fontmin 使用文档](http://ecomfe.github.io/fontmin/#source)