由 这篇文章也提供 保加利亚语版本.
虽然 Firefox 3.0 通过引入对字距调整、连字和多种字重的支持以及对渲染复杂脚本的支持来改进排版渲染，但作者仍然局限于在设计中使用常用的字体。Firefox 3.5 通过引入对 CSS @font-face 规则的支持来消除这种限制，这是一种将 TrueType 和 OpenType 字体链接到网页的方式，就像今天链接代码和图像一样。Safari 从 3.1 版开始就支持这种类型的字体链接，Opera 也宣布计划在 Opera 10 中支持它。
使用 @font-face 进行字体链接相对简单。在样式表中，每个 @font-face 规则都定义了要使用的字体系列名称、要加载的字体资源以及给定字体的样式特征，例如它是否为粗体或斜体。Firefox 3.5 只在需要时下载字体，因此样式表可以列出一组完整的字体，其中只有一部分会被实际使用。
/* Graublau Sans Web (www.fonts.info) */
@font-face {
font-family: Graublau Sans Web;
src: url(GraublauWeb.otf) format("opentype");
}
body {
font-family: Graublau Sans Web, Lucida Grande, sans-serif;
}
支持 @font-face 的浏览器将使用 Graublau Sans Web 渲染文本，而旧浏览器将使用 Lucida Grande 或默认的无衬线字体渲染文本。示例 在此
深入探讨
今天大多数字体系列只包含四种字体：常规、粗体、斜体和粗斜体。要定义每种字体，可以使用 font-weight 和 font-style 描述符。它们定义了字体的样式；这里没有级联或继承的概念。如果没有明确定义，这些属性的默认值为 ‘normal’
/* Gentium by SIL International */
/* http://scripts.sil.org/gentium */
@font-face {
font-family: Gentium;
src: url(Gentium.ttf);
/* font-weight, font-style ==> default to normal */
}
@font-face {
font-family: Gentium;
src: url(GentiumItalic.ttf);
font-style: italic;
}
body { font-family: Gentium, Times New Roman, serif; }
当使用此字体系列渲染时，以下 示例文本
一个容易被忽视的功能是，@font-face 允许创建包含多个常规和粗体字体的字体系列 - 对于单个系列可以定义多达九种字重。即使在 Windows 上也是如此，底层平台限制通常将字体系列限制为常规和粗体字重。像日本开源 M+ 字体项目 的字体，就有多达七种字重。以下 示例 使用了其中的一些字重
在某些情况下，作者可能更愿意使用本地可用的字体，只在这些字体不可用时才下载字体。这可以通过在 @font-face 规则的 src 描述符定义中使用 local() 来实现。浏览器将遍历 src 描述符中的字体列表，直到成功加载其中一种字体。
/* MgOpen Moderna */
/* http://www.zvr.gr/typo/mgopen/index */
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue"),
local("HelveticaNeue"),
url(MgOpenModernaRegular.ttf);
}
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
body { font-family: MyHelvetica, sans-serif; }
下面的屏幕截图显示了 Mac OS X、Windows 和 Linux 上 简单测试用例 的结果，该测试用例使用了上面定义的字体系列
Helvetica Neue 字体系列在大多数 Mac OS X 系统上可用，但在 Windows 或 Linux 机器上通常不可用。当此示例在 Mac OS X 上渲染时，将使用本地 Helvetica Neue 字体，不会下载任何字体。在 Windows 和 Linux 上，尝试加载本地字体失败，会下载并使用替代字体 - MgOpen Moderna。MgOpen Moderna 被设计为 Helvetica 的替代品，因此它与 Helvetica Neue 的渲染方式相似。这样，作者可以保证文本的外观，但在不需要时避免下载字体。
用于引用特定字体字体的名称是单个字体的完整名称。通常是字体系列名称加上样式名称（例如，“Helvetica Bold”。在 Mac OS X 上，名称列在给定字体的信息面板中。选择单个字体，然后从 FontBook 中的“预览”菜单中选择“显示字体信息”。
Linux 下也有类似的工具。在 Windows 上，使用 字体属性扩展（可从 Microsoft 免费下载），查看这些名称。安装扩展后，属性面板将显示有关单个字体的的信息。完整名称在“名称”选项卡上称为“字体名称”。
Safari 仅在 Mac OS X 下支持 PostScript 名称查找，因此在 Mac OS X 下也支持 Postscript 名称。对于 OpenType PS 字体（通常用 .otf 扩展名标记），完整名称与 Windows 下的 PostScript 名称相同。因此，对于这些字体，建议作者同时包含完整名称和 PostScript 名称，以实现跨平台互操作性。
支持多种语言
许多语言缺乏常用的字体。对于少数民族语言和古代文字，选择范围通常缩小到只有少数几种。使用 @font-face 允许使用这些语言的作者通过在页面中包含字体来改善这种情况。
@font-face {
font-family: Scheherazade;
src: url(fonts/ScheherazadeRegAAT.ttf) format("truetype-aat"),
url(fonts/ScheherazadeRegOT.ttf) format("opentype");
}
body { font-family: Scheherazade, serif; }
像阿拉伯语这样的语言需要文本整形，其中给定字符的显示会受到周围字符的影响。不同的平台支持不同的渲染技术来实现文本整形；在 Mac OS X 上，需要 AAT 字体，而在 Windows 和 Linux 上，需要 OpenType 字体。如果没有给定平台所需的格式的字体，文本整形将无法正确渲染。
在 Mac OS X 上，将下载字体的 AAT 版本。在 Windows 和 Linux 上，不支持使用 AAT 字体进行渲染，因此将跳过下载 AAT 字体，而是使用 OpenType 字体。因此，文本在所有平台上都能正确渲染。
跨站点字体使用
默认情况下，Firefox 3.5 仅允许为从同一站点提供的页面加载字体。这会阻止站点随意使用其他站点上的字体。对于明确希望允许跨站点字体共享的站点（例如在线字体库），Firefox 3.5 支持使用 访问控制头 来控制这种行为。通过在发送到字体文件中的 HTTP 标头中添加一个额外的标头，站点可以启用跨站点使用。
# example Apache .htaccess file to add access control header
Header set Access-Control-Allow-Origin "*"
启用此 HTTP 标头后，任何页面都可以访问此站点上的字体，而不仅仅是来自同一站点的页面。
字体许可问题
当在网站上使用字体时，务必始终确认字体许可证允许在网站上使用。如果许可协议中充斥着晦涩难懂的法律术语，请谨慎行事，并在在网站上使用字体之前咨询字体供应商。如果许可证允许使用，最好在 @font-face 规则附近添加一个注释，指向许可证，以便将来参考。
“我找到了一种免费字体，我可以在我的网站上使用它吗？”
也许可以，也许不行。一些免费字体作为预告产品进行分发，以鼓励购买，并且不允许重新分发或发布在 Web 服务器上。即使对于免费字体，也要查看许可证。
“我只想在我的网站上使用 [在此处插入您最喜欢的字体名称]。这可能吗？”
现在可能不行。在网络上使用字体链接还处于起步阶段。今天大多数与专有操作系统捆绑在一起的字体都有许可证，限制其使用范围仅限于标准桌面应用程序，因此将这些字体上传到 Web 服务器几乎肯定是不允许的。盗版过去一直困扰着字体行业，因此大多数字体供应商不愿允许使用其字体，除非是在相对有限的范围内。许多字体供应商关注出版和印刷行业的需要，他们许可协议的相对复杂性往往反映了这一点。未来，一些字体设计师可能会得出结论，将字体作为网络字体销售将超过因盗版而造成的任何潜在销售损失，而另一些则可能不会。他们的许可协议将反映这种选择，应该予以尊重。
股票摄影市场经常被描述为一个价值 20 亿美元的市场，但网络字体市场仍然接近 0 美元市场，它只能向上发展！
Internet Explorer 中的字体链接
Internet Explorer 一直以来都支持字体链接，但仅限于链接到专有 EOT 字体格式的字体。创建 EOT 字体的唯一方法是使用 Microsoft WEFT 工具，该工具仅在 Windows 上可用。只有 TrueType 和 OpenType TT 字体可以转换为 EOT 格式，OpenType PS (.otf) 字体不能使用。
Internet Explorer 仅识别 @font-face 规则中的 font-family 和 src 描述符，因此每个系列只能包含一个字体。它不理解 format() 提示，并将忽略任何包含这些提示的 @font-face 规则。这种行为可用于实现跨平台字体链接。
/* Font definition for Internet Explorer */
/* (*must* be first) */
@font-face {
font-family: Gentium;
src: url(Gentium.eot) /* can't use format() */;
}
/* Font definition for other browsers */
@font-face {
font-family: Gentium;
src: url(Gentium.ttf) format("opentype");
}
未来工作
对于 Firefox 3.5，font-stretch 和 unicode-range 描述符不受支持。 在 SVG 文档中定义的字体 目前也不支持。这些功能正在考虑纳入未来的版本中。一如既往，欢迎补丁！
更多资源
翻译
文档
示例
字体资源
- Font Squirrel
- 10 款适用于 @font-face 的优秀免费字体
- 基于 Web 的字体子集工具
- Smashing Magazine 推出的 40 款优秀的免费字体
- FontTools/TTX - 用于显示字体数据的 Python 脚本
字体政治
- 微软的 Bill Hill 关于字体嵌入
- 微软的 Chris Wilson 关于直接链接到 TrueType 字体
- Robert O’Callahan 关于网络字体格式的博客文章
- W3C TPAC 会议上关于字体格式的讨论
- Mark Pilgrim 批评字体铸造厂的文章
- David Baron 关于可下载字体格式的想法
关于 Christopher Blizzard
一次发布，让网络更美好。
177 条评论