Hexo

前言

开发人员可以为自已的网页指定特殊的字体（将指定字体提前下载到站点中），无需考虑用户电脑上是否安装了此特殊字体。从此，把特殊字体处理成图片的方式便成为了过去。

支持程度比较好，甚至 IE 低版本的浏览器也能支持。

字体的常见格式

不同浏览器所支持的字体格式是不一样的，我们有必要了解一下字体格式的知识。

TureTpe格式：(.ttf)

.ttf 字体是Windows和Mac的最常见的字体，是一种RAW格式。

支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome4+、Safari3+、Opera10+、iOS Mobile、Safari4.2+。

OpenType格式：(.otf)

.otf 字体被认为是一种原始的字体格式，其内置在TureType的基础上。

支持这种字体的浏览器有Firefox3.5+、Chrome4.0+、Safari3.1+、Opera10.0+、iOS Mobile、Safari4.2+。

Web Open Font Format格式：(.woff)

woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离。

支持这种字体的浏览器有IE9+、Firefox3.5+、Chrome6+、Safari3.6+、Opera11.1+。

Embedded Open Type格式：(.eot)

.eot字体是IE专用字体，可以从TrueType创建此格式字体，支持这种字体的浏览器有IE4+。

SVG格式：(.svg)

.svg字体是基于SVG字体渲染的一种格式。

支持这种字体的浏览器有Chrome4+、Safari3.1+、Opera10.0+、iOS Mobile Safari3.2+。

总结：

了解了上面的知识后，我们就需要为不同的浏览器准备不同格式的字体。通常我们会通过字体生成工具帮我们生成各种格式的字体，因此无需过于在意字体格式之间的区别。

下载字体的网站推荐：

WebFont 的使用步骤

打开网站http://iconfont.cn/webfont#!/webfont/index，如下：

上图中，比如我想要「思源黑体-粗」这个字体，那我就点击红框中的「本地下载」。

下载完成后是一个压缩包，压缩包链接：http://download.csdn.net/download/smyhvae/10253561

解压后如下：

上图中，我们把箭头处的html文件打开，里面告诉了我们 webfont 的使用步骤：

（1）第一步：使用font-face声明字体

@font-face {font-family: 'webfont';
    src: url('webfont.eot'); /* IE9*/
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('webfont.woff') format('woff'), /* chrome、firefox */
    url(&#x