基础知识
@font-face虽然是CSS3模块，但是IE4时代开始就已经支持了它，只不过跟现在CSS3的功能相比完全不可比。
先看看http://www.css88.com/book/css/rules/@font-face.htm
可以看出，各种浏览器对它的支持五花八门，所以，写出一个全浏览器兼容的定义字体的代码就很重要。
@font-face的本质就是先定义，后使用。现在我们先定义：
@font-face {
font-family: 'diyfont';
src: url('diyfont.eot'); /* IE9+ */
src: url('diyfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('diyfont.woff') format('woff'), /* chrome、firefox */
url('diyfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
url('diyfont.svg#fontname') format('svg'); /* iOS 4.1- */
}
这种写法的原因是：浏览器会从前往后尝试使用字体，优先使用eot字体，如果不兼容浏览器，就使用woff字体，依然不兼容就使用ttf字体，还不兼容就使用svg字体。
这里需要介绍一下eot格式、ttf格式、woff格式、svg格式。
.eot ，Embedded Open Type，主要用于早期版本的IE，是其专有格式，带有版权保护和压缩。
.ttf ，TrueType，在操作系统里更为常见，在web上使用的话，是为了兼容早期仅支持TTF和OTF的浏览器。由于体积比较大，还需要服务器额外压缩。
.otf，OTF扩展名的O表示OpenType - PostScript字体，采用的是PostScript曲线，支持OpenType高级特性。
.woff ，Web Open Font Format，可以看作是ttf的再封装，加入了压缩和字体来源信息，通常比ttf小40%。也是当前web字体的主流格式。
.woff2 ，Web Open Font Format 2.0，相比woff最大的优化应该是加强了字体的压缩比。目前 支持的浏览器 只有正在互飙版本号的Chrome和Firefox。
.svg，基于SVG字体渲染的一种格式，支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
图标字体
我们看看著名的glyphicons-halflings图标字体库都提供了哪些文件：
Paste_Image.png
看来它提供全了。更著名的Font Awesome图标字体，提供了哪些文件呢？
Paste_Image.png
那么glyphicons-halflings如何声明呢？
@font-face {
font-family: 'Glyphicons Halflings';
src: url("../fonts/glyphicons-halflings-regular.eot");
src: url("../fonts/glyphicons-halflings-regular.eot?#iefix") format("embedded-opentype"),
url("../fonts/glyphicons-halflings-regular.woff2") format("woff2"),
url("../fonts/glyphicons-halflings-regular.woff") format("woff"),
url("../fonts/glyphicons-halflings-regular.ttf") format("truetype"),
url("../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular") format("svg"); }
再看看Font Awesome怎么声明的：
@font-face {
font-family: 'FontAwesome';
src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');
src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),
url('../fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
url('../fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),
url('../fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),
url('../fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
font-weight: normal;
font-style: normal;
}
找到规律了吧，声明的顺序是：
1、先声明字体家族的名称。
2、单独声明一个资源，声明eot。
3、再声明一个资源，依次声明eot?#iefix、woff2、woff、otf、ttf、svg#xxx。顺序一定不要错。资源的格式是url('...') format('...')。
现在，我们研究一下怎么使用这两个字体。其实字体的开发方会给你提供一个CSS文件，完全不用你自己考虑如何使用字体。大致如下：
.glyphicon {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon-asterisk:before {
content: "\002a";
}
......
当你想使用一个图标文字的时候，只需要用一个span标签，加上两个类，就可以使用了。
<span class="glyphicon glyphicon-asterisk"></span>
文字字体
现在我只想用一个文字字体，并不想用图标字体，怎么办？
首先，我们要去找字体，比如从Google Web Fonts和Dafont.com寻找自己需要的字体。现在我从Dafont.com下载了一个“Lost in Wild”字体，这个字体长相很嚣张。我们试一试。
我把压缩包下载到本机服务器的www目录，解压，里面有otf和ttf两种文件，分别为60KB和155KB。我先在HTML文件写一段CSS规则：
@font-face {
font-family: 'Lost and Wild';
src: url('/lost_in_wild/Lost in Wild.otf') format('opentype'),
url('/lost_in_wild/Lost in Wild.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
.font-lostandwild {
font-family: 'Lost and Wild';
}
然后构建一个简单的HTML文件，主要内容是：
<p class="font-lostandwild">Too young, too simple, sometimes naive!</p>
打开页面我们看看效果：
Lost and Wild字体使用效果
虽然看起来很乱，但是我们用起来是成功了。不过请注意，http://www.css88.com/book/css/rules/@font-face.htm 这里已经明确显示，IE6-8是不支持otf/ttf字体的，所以如果要兼容到IE8，你找的字体库里面必须要含有.eot文件，如果没有，要么找转换工具做一个.eot文件，要么就放弃这个字体库。
转换工具：
1、ttf2eot，这是一个node.js实现的库，使用起来很简单。
2、微软的WEFT 3.2，是一个程序，微软出的程序的易用性不用怀疑。
最后，你可能会问，为啥没有提中文网络字体？中文字体由于体积大，一般都在5MB以上，所以不适合作为网络字体使用。有些网站“强行”使用上了中文网络字体，用户体验很差，因为你刚打开网页的时候，5MB的字体文件还没后台下载下来，所以你看到的字体都是默认字体，等了10秒之后，后台把字体下载下来，然后网页会“一抖”，其实是浏览器重新渲染一遍字体，然后你才能看到正确的字体。所以，如果你找到了一款2M以内的中文字体，就可以尝试用用，否则没必要为了字体加大网页体积，你还有一种方法是把字写到图里面，贴一张图即可。
网友评论