CSS @font-face(CSS 自定义字体)

@font-face可以实现从服务器端加载字体，所有浏览器中使用的字体就可以不受本地字体的限制。@font-face真的不是什么新鲜玩意，早在2001年时就被提出来，只不过近两年才被各浏览器广泛支持。而且各浏览器支持的字体文件格式也可能不同，一般来说如下四种格式可覆盖所有浏览器。

eot：该格式仅在老版本的IE中使用，浏览器兼容性查看http://caniuse.sinaapp.com/html/item/eot/index.html

ttf：(TrueTypeFont)是Apple公司和Microsoft公司共同推出的字体文件格式,随着windows的流行，已经变成最常用的一种字体文件表示方式，支持的浏览器很多。浏览器兼容性查看http://caniuse.sinaapp.com/html/item/ttf/index.html

svg：(Scalable Vector Graphics)该字体可能最早在IOS设备上被支持，没有ttf格式使用的广泛。浏览器兼容性查看http://caniuse.sinaapp.com/html/item/svg-fonts/index.html

woff：（Web Open Font Format）是一种网页所采用的字体格式标准。此字体格式发展于2009年，现在正由W3C标准化，以求成为web字体的统一标准。浏览器兼容性查看http://caniuse.sinaapp.com/html/item/woff/index.html

如何定义字体不在本文的介绍范围内，可以用一些软件来生成字体文件和各格式之间转换。定制字体需要有非常好的设计基础。

如何使用自定义字体？

第一步，在CSS中引入字体并给名字取一个合适的名字，如下

[css]  view plain copy

1. @font-face {  
2.     /* font-properties */  
3.     font-family: pictos;  
4.     src:url('pictos/pictos-web.woff'),    
5.     url('pictos/pictos-web.ttf'),  
6.     url('pictos/pictos-web.eot'); /* IE9 */  
7. }  

font-family定义字体的名字，接下来的src是加载字体文件的位置，之所有有多个url就是因为浏览器兼容问题。

第二步，使用刚刚定义的字体，如下

[css]  view plain copy

1. div {  
2.     font-family: pictos;  
3. }  

具体例子请查看 http://caniuse.sinaapp.com/html/demos/fontface/index.html .

@font-face的浏览器兼容性请查看http://caniuse.sinaapp.com/html/item/fontface/index.html

1、设计师可以在网页端展示自己的设计，不受制于本地系统对字体的支持，凸显网站的与众不同。

2、可以使用自定义字体来定义图标（icon）。这点是本片文章主要想说的。

比如做一个移动端的wep app，app中会有很多的icon，如搜索、左箭头、右箭头、上箭头、下箭头等等，这些icon一般都是纯色的。如果这些icon通过自定义字体来实现（即每个icon是一个字符，比如我们输入a，显示出来的是左箭头）那么icon的可定制性就很高了，我们可以随意的定义颜色、大小、透明度等等，而且有一个好的浏览器兼容性。 

另一方面我们加载一个字体文件就可以加载所有icon，这样也可以减轻服务端的压力，更何况我们可以在浏览器端配置web缓存将字体文件缓存在浏览器端。相比图片精灵来说，自定义字体有更大的灵活性和可易维护性。

据我所知移动端开发框架Sencha Touch从2.2版本开始使用了自定义字体来实现icon。