Code,Please

上篇介绍了20+的@fontface图标集，想必大家已经有些心痒了，那么到底如何使用@font-face，又如何解决浏览器兼容问题呢？本篇就会进行介绍。

使用@font-face的优势

@font-face是一个CSS规则，允许你在网页中使用电脑上没有安装的字体。这意味着设计和开发不用在受到电脑上的字体限制，比如Arial, Times New Roman, Verdana and Trebuchet等。令人沮丧的是，这个只适用于英文字体，文件大小M级以上的中文字体文件实在让人望而生畏。但是图标字体文件不受中英文限制，是在项目中可以尝试使用的。使用@font-face来引用图片的优点上篇已介绍，这里就不在介绍了。

注意：字体许可

字体必须有一个网络字体的使用许可。所以使用字体前需要检查你下载或购买字体的网站或者该字体的文档。
字体使用许可是非常让人头痛的一件事，同时它阻碍了很多优秀字体在网页上的使用。
自然地，字体制造者是很愿意使用者为他们的字体付款的，所以他们对于字体的使用上做了非常严格的限制。

如何使用@font-face

使用@font-face非常简单，你只需要在你的样式文件中包含一个规则和字体文件的引用。本文我将以图标的字体文件我使用是是Web Symbols作为范例。

1
2
3
4
5
6
7

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('WebSymbols-Regular-webfont.eot');
}

然后，假设你要在标题1中使用这个字体，可以这样：

1
2
3
4
5

h1 {
    font-family: WebSymbolsRegular, Helvetica, Arial, sans-serif;
}

以上代码考虑到可能不支持@font-face，进行了优雅降级。

浏览器兼容

所有主要的浏览器都有他们自己支持的字体格式：

• IE只支持EOT
• Mozilla支持OTF和TTF
• Safari支持OTF, TTF和SVG
• Chrome支持TTF和SVG

另外，iPad和iPhone上的Safari需要SVG。
最有名的跨浏览器@font-face使用方法似乎是Paul Irish的Bulletproof @font-face syntax.
使用Paul Irish的方法，你需要包含多个格式的字体文件来兼容多个浏览器。
另外，该方法的一个小技巧是可以忽略本地同名字的字体，以免加载我们不需要的字体。
下面我们来看看这个方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

@font-face {
    font-family: 'WebSymbolsRegular';
    src: url('WebSymbols-Regular-webfont.eot');
    src: local('I am miyukizhang'),
        url('WebSymbols-Regular-webfont.woff') format('woff'),
	url('WebSymbols-Regular-webfont.ttf') format('truetype'),
	url('WebSymbols-Regular-webfont.svg#webfont') format('svg');
    font-weight: normal;
    font-style: normal;
}

首先，我们为我们剩余的代码声明了一个标识符（WebSymbolsRegular）。
然后，我们为IE引用EOT格式的文件。如果浏览器不是IE，会忽略它直到找到自己能够支持的字体文件。
src:local就是我们上面提到的本地字体技巧。它主要告诉浏览器使用一个你电脑中不存在的虚拟的字体。这样，我们就不用担心错误的字体被加载。
最后，设置font-weight和font-style来保证所有的浏览器使用相同的默认样式。
需要注意的是，不同的浏览器和操作系统对字体的渲染方式不同。所以我们必须检查所有的浏览器的显示效果之后再决定是否使用。

我在哪里能够获取所有这些格式的字体文件

我们也许已经注意到要兼容所有的浏览器需要至少四个格式的文件，如果我们手上只有一种格式，应该怎么办呢？

Font Squirrel

答案就是将Font Squirrel添加到你的收藏夹中。Font Squirrel提供不计其数的你需要的自定义和浏览器兼容的免费@font-face包。
每个包中包括了你所需要的各种格式的文件和用于演示的HTML和CSS文件。

@font-face Kit Generator

如果Font Squirrel没有你需要的包，但是你有从其他资源下载的字体文件，你可以使用Font Squirrel的@font-face kit generator工具。你只需要上传你的字体文件，这个工具会自动地将这个文件转换为你需要的所有格式，然后提供一个包让你来下载。
注意，使用这个工具你需要保证你有转化上传字体的许可权限。

流行的@font-face服务

许多服务已经开始提供简化@font-face流程的免费或者收费解决方案。
下面介绍一个免费的服务：

Google Font API

使用这个API，只需要简单地从Google Font Directory选择一个字体，然后拷贝纸粘贴一段代码到标签中。接着，你就可以在你的CSS中引用这个字体了，而不再需要@font-face了。
在Google Font Directory中的字体都是免费和开源的。

总结

现在你可能已经蓄势待发准备开始使用@font-face，可以通过@font-face包解决浏览器兼容问题。
但是，再次提醒：请注意，字体的使用许可。

参考：
The Essential Guide to @font-face
Implementing @font-face