如何将 font-face 规则用于流行的字体服务

　　如果认为寻找字体是浪费时间，您可考虑阅读
Errol Morris 在纽约时报上发表的文章 “Hear, All Ye People; Hearken, O Earth (Part
One)”，介绍了他研究字样对于我们对事实的认知有何影响。 （字体爱好者、真相寻求者，以及任何喜爱优秀研究项目的人都应阅读他的文章）。

　　如果您已确信字体至关重要并且您从没有足够的选择，您应对@font-face CSS规则现在允许将几乎任何字体用在网页上而感到高兴。

　　将您的新字体选项与其他现有的
CSS3 附加效果相结合，如文本阴影和渐变，就可创建难以置信的文本效果，而无需求助于老旧的解决办法 – 结合使用图像和在 Photoshop 中创建的字体样式。
（参见图 1，了解 @font-face规则的实际应用示例。）

　　图
1. 在此网站上，我设计了 Architect Antonio Gaudi，这个横幅不仅仅是一个图像。我创建横幅的方法是，将一幅照片放在一个 div
标记的背景中，然后在顶部定位文本和照片名称，使用 @font-face 规则更改字体并添加文本阴影。 （照片来源：
istockphoto.com）

　　使用文本和 @font-face 规则代替图像中的文本，可带来许多优势：

　　文本加载速度比图像更快。
　　使用
HTML 和 CSS 格式化的文本比图像中的文本更容易更新。
　　在页面上的文本中包含关键词而不将它们隐藏在图像中，可改进您的搜索引擎排名。
　　使用文本代替图像，可让您的网页更容易供使用屏幕阅读器或其他特殊浏览器的任何残疾人士访问。
　　文本是可选择和可缩放的。

　　@font-face 规则的工作原理

　　使用 @font-face 规则初看起来非常简单。从本质上看，它只需要两个步骤。首先，使用 @font-face 规则链接到在一个
Web 服务器上托管的字体。 然后，在 CSS 规则中的 font-family 属性中使用该字体。 非常简单。

　　知道这些基本说明后，您很容易认为可将硬盘上的任何字体上传到
Web 服务器，通过 @font-face 规则链接到它，这样就足够了。不幸的是，就像网络上如此多的内容一样，在网页中托管和使用字体比预期要复杂一些
– 原因可能比您想象的更多。

　　首先，字体设计人员拥有字体版权
– 我并不是说这有任何不对，它只是让事情复杂化。如果希望更多地了解获取字体版权的复杂性，以及为什么至少一位 Web 设计人员已因生成 Web
内容被起诉，请查阅 来自 CopyHype.com 的“版权和 Web 字体”。

　　让情况变得更复杂的是，即使您拥有权利在服务器上托管一种字体，您也可能没有该字体在
Mac 和 Windows 计算机上正确显示字母或在所有 Web 浏览器中运行所需的所有变体。

　　所有这些因素共同导致了托管您自己的
Web 字体比预期的要更复杂，这正是我们大部分人使用一种流行字体服务的原因，如 Typekit、Font Squirrel 或 Google Web
Fonts。

　　但并非所有字体服务的原理都是相同的。
确实，这 3 种流行的服务采用极其不同的方法将字体提供给 Web 设计人员。 Font Squirrel 支持您下载字体，然后将它上传到您自己的 Web
服务器上（它们为您管理版权问题和字体选项）。 Google Web Fonts 让链接到在其服务器上托管的字体变得很简单。 Typekit
采用了一种非常不同、更加复杂的方法，我将在本文末尾介绍。

　　我在观察中发现，Web
设计人员对使用 @font-face 规则的许多混淆偏离了这样一个事实：大部分流行的字体服务都采用了不同的方法来管理
Web 字体，并且您在网页中使用这些字体的步骤也不同，这正是我单独介绍每种字体服务的原因。

　　本教程的目标是，首先帮助您理解在字体服务方面的选择范围，然后提供有关如何使用它们的基本说明，以便您可就哪项服务最适合您而做出更精明的决策。

　　目前可用的字体服务比我能用一篇文章介绍的要多得多，所以我选择重点介绍
Typekit、Font Squirrel 和 Google Web Fonts，因为它们是最流行的选择，还因为它们代表着在网络上管理字体的 3 种不同方法。
理解这 3 种服务的工作原理后，您应对总体概况有一个很好的了解，并且已准备好对市面上的任何其他字体执行精明的评估。

　　使用 Google Web Fonts

　　我首先介绍 Google 的 Web
字体服务，这并非因为它是最优秀的，而是因为它最容易使用 – 并且是免费的。如果预算有限，并且您无需在一个庞大的字体集合中进行选择，Google Web
Fonts 支持向您的网站轻松添加一些新的字体选项。

　　需要注意一些限制。
Google 的 Web 字体全部是免费字体，很少有字体提供多于一种字体样式。如果希望使用各种不同的字体样式，最好选择 Typekit 或 Font
Squirrel。

　　另请注意，使用
Google 的托管字体服务时，您会链接到 Google 服务器上的字体。 尽管 Google
的服务器非常可靠，但如果他们的服务器宕机，您漂亮的字体就会无法使用，此时会采用老式的默认字体来显示您的文本。