iconfont 记录

正文

这段时间一直在做iconfont.cn这个平台。积累了些东西，记录下。

1.什么是iconfont？

iconfont不是什么新技术了。
我们知道web网页能使用的字体一直很少，很多时候设计师用ps做出来的效果图，里面的字体我们都没办法在网页上实现。其实网页里面可以使用自定义字体的。而且还是所有浏览器都支持，包括烦人的ie。当然各个浏览器支持的字体格式不同。下面是兼容情况：

• IE：从IE4开始支持eot格式，IE9开始支持woff。
• webkit/safari：支持TrueType/OpenType(.ttf)，OpenType PS(.otf)，iOS4.2+支持.ttf，iOS 4.2以下只支持SVG字体； Safari5.1+ 开始支持woff格式
• Chrome：除webkit支持的以外，从Chrome 6开始，开始支持woff格式；
• Firefox：支持.ttf和.otf，从Firefox 3.6开始支持woff格式；
• Opera：支持.ttf、.otf、.svg。 Opera 11开始支持woff；
• iPad, iPhone and Android 3.0+ 支持SVG fonts。

打开一个字体文件如下图：

你会发现，其实一个字就是一个图形。所以就有人提出，可以设计一些图标占这些字体的坑。这样，你在页面上写这个字(比如上面的 !)，浏览器就会渲染出这个图标(小喇叭)了。这样就可以像操作字一样操作这些图标。还是矢量的。对于现在这种高清屏满天飞的情况，实在是再好不过了。

2.iconfont使用方式

自定义字体的使用
因为各个浏览器支持不同，而我们一般下载下来的字体都是ttf的。我们需要转换一下，得到svg，eot，woff格式的字体。两种方式转换：

• 在线转换，地址： www.fontsquirrel.com/tools/webfo…
• 自己动手，主要使用fontforge的python命令行脚本来搞，以后会介绍。

当然现在很多网站，已经可以下载这些字体了。国外的如iconmoon。国内的可以试试我们的 iconfont.cn
得到各种字体后怎么用呢？

1.使用font-face先声明字体

@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#uxiconfont') format('svg'); /* iOS 4.1- */
}

2.定义使用iconfont的样式

.iconfont{font-family:"iconfont";font-size:16px;font-style:normal;}

3.挑选相应图标对应的字体，应用于页面

比如上面的 ！ 我们这么写：

请到「今天看啥」查看全文