简介
借助 CSS3 的 @font-face 功能，我们能够在网络上以可访问、可操作和可扩展的方式使用自定义字体。但是，您可能会问：“如果我们有 Cufon、sIFR 和图片中的文字，我们为什么要使用 @font-face？” 将 @font-face 用于自定义字体的一些好处：
- 按查找条件确定的完整可搜索性 (
ctrl-F) - 屏幕阅读器等辅助技术的无障碍功能
- 文字可通过浏览器内的翻译或翻译服务进行翻译
- CSS 完全能够调整排版显示效果：
line-height、letter-spacing、text-shadow、text-align以及::first-letter和::first-line等选择器
@font-face 的本质
从最基本的方面，我们声明要使用的新自定义远程字体，如下所示：
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.ttf');
}
然后投入使用：
h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }
在此 @font-face 声明中，我们使用 font-family 属性来显式命名字体。它可以是任何名称，无论实际使用的字体是什么；font-family: 'SuperDuperComicSans'; 恰好可以，但可能不适合您的声誉。在 src 属性中，我们指向浏览器可以找到字体资源的位置。有些有效的字体类型是 eot、ttf、otf、svg 或内嵌嵌入整个字体数据的数据 URI，具体视浏览器而定。
| otf 和 ttf | svg | woff | EOT | |
|---|---|---|---|---|
| IE | IE9 | IE9 | IE5 及更高版本 | |
| Firefox | FF3.5 | FF3.5 | FF3.6 | |
| Chrome | 谷歌浏览器 4 | Chrome 0.3 | Chrome 浏览器 5 | |
| Safari | 3.1 | 3.1 | ||
| 歌剧 | Opera 10.00 | Opera 9 | ||
| iOS | iOS 1 | |||
| Android | 2.2 |
当然，没有什么事比它本来那么简单。上述代码最初的局限性是它不向 IE 6-8 提供 EOT。bulletproof @font-face 语法提供了一种解决此问题的方法；接下来提供一个强大的版本。
@font-face {
font-family: 'Tagesschrift';
src: url('tagesschrift.eot'); /* IE 5-8 */
src: local('☺'), /* sneakily trick IE */
url('tagesschrift.woff') format('woff'), /* FF 3.6, Chrome 5, IE9 */
url('tagesschrift.ttf') format('truetype'), /* Opera, Safari */
url('tagesschrift.svg#font') format('svg'); /* iOS */
}
已经很头痛了？如果您只想快速上手，请使用 Font Squirrel 生成器，这款工具可为您简化字体生成和准备其变体和 CSS 的整个过程。现在，在实践网页字体时不可或缺。
支持移动设备？
移动 Safari 浏览器从 iOS 3.1 开始支持 SVG 网页字体，而从 2.2 版开始，Android 设备开始支持 otf/ttf。但是，您的移动用户应该获得这种增强的排版体验吗？我不同意。主要原因是 WebKit 通过 @font-face 处理等待自定义字体的文本：文本是不可见的。因此，在使用低带宽的移动网络连接时，您的用户将完全看不到任何文字，直到加载完约 50, 000 的字体数据。Webkit 团队正在寻求一种解决方案，以在几秒钟过期后启用后备字体，但在这一切推出之前，让你的用户在他们与你的内容之间经历这种障碍是公平的。
网页字体服务
许多服务会将 @font-face 功能封装在一个简单的 API 中，通常，您只需向 HTML 和一些配置添加单个 CSS 或脚本行，就大功告成了。许多像 WebInk、Typekit 和 Fontslive 等都允许您按月付费使用字体（有时最高可达带宽上限）。使用这些服务对于临时开发者来说非常方便，因此可以省去提供跨浏览器解决方案的一些复杂问题
借助 Google Font API，您只需链接到样式表，让 Google 处理跨浏览器和性能问题，即可使用少量精选的自由许可字体。这是开始使用网页字体的最快方式。
为 @font-face 寻找专业字体
设计人员通常会感到惊讶，仅仅购买字体许可（例如，用于平面设计）并不意味着您可以在 @font-face 中使用它。@font-face（或网络嵌入）的许可通常单独出售。请仔细阅读该协议；如果您有任何疑问，可随时与字体开发商联系。 Fontspring 是一家字体精品店，销售数百种优质专业字体，所有字体均符合 @font-face 的使用要求。FontFont 和其他开发商已经开始直接销售 @font-face 许可，但目前仅以 WOFF 和 EOT 为目标，这使得浏览器市场占有很大比例（但会缩水）。许多开发商都在将网页字体许可添加到他们的目录中，但如果您找不到适用于所选字体的字体许可，请与他们联系咨询。
处理 FOUT
无样式文本闪烁是 Firefox 和 Opera 中的一种现象，网页设计人员很少喜欢这种现象。通过 @font-face 应用自定义字体时，会有一小段时间在加载页面时尚未下载和应用字体，并且将使用 font-family 堆栈中的下一个字体。这会导致在升级之前闪烁其他（通常不太好看）字体。
与 Google Font API 一起提供的是 WebFont Loader，这是一个 JavaScript 库，旨在提供多个事件钩子，让您能够更好地控制加载。让我们来看看如何让其他浏览器模仿 WebKit 在加载 @font-face 字体时隐藏后备文本的行为。
<script src="//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js"></script>
<script>
WebFont.load({
custom: {
families: ['Tagesschrift'],
urls: ['http://paulirish.com/tagesschrift.css']
}
});
</script>
/* we want Tagesschrift to apply to all h2's */
.wf-loading h2 {
visibility: hidden;
}
.wf-active h2, .wf-inactive h2 {
visibility: visible;
font-family: 'Tagesschrift', 'Georgia', serif;
}
如果停用 JavaScript，文本将始终保持可见状态；如果字体错误出现某种错误，它将安全地回退到基本 Serif。目前，这只是一项权宜之计；大多数网页字体专家都希望将后备文字隐藏 2-5 秒，然后再显示。这种超时对低带宽和移动设备大有助益。可以理解，Mozilla 希望尽快解决此问题。
一个更轻量但效率更低的解决方案是 font-size-adjust 属性，目前只有 Firefox 支持。这样，您就有机会在整个字体堆栈中对 x 高度进行归一化，从而减少 FOUT 中的可见变化量。事实上，Font Squirrel 生成器刚刚添加了一个功能，它可以告诉您上传的字体的 x 高度比率，因此您可以准确设置 font-size-adjust 值。
摘要
网页字体为设计师提供了很大的自由度，并且随着自由连字和样式备用等即将推出的功能，它们将具有更大的灵活性。目前，您可以放心地实现 CSS3 的这一部分，因为它覆盖了 98% 的已部署浏览器。祝你观看愉快！