如何使用 CSS3 增强网站字体设计CSS, 字体网页设计, 字体WOFF字体属性字体嵌入

利用 Windows Internet Explorer 9 中新提供的对 层叠样式表 (CSS)，级别 3 (CSS3) 字体模块的支持，您可以将您的网站访问者的版式体验进行升级。 本主题演示如何将新的 CSS3 字体功能并入到您的网站中，以便在 Internet Explorer 9 和其他现代浏览器中突显您的字体设计。

版式是 Web 设计不可缺少的一部分，Internet Explorer 9 支持在 CSS 字体模块级别 3工作草案和 Web 开放字体格式 (WOFF) 1.0 工作草案中定义的高级版式功能。 这些功能包括以下各项：

• 通过使用 @font-face 规则改进的字体链接
• 新提供的对 Web 字体格式的支持：
  • Web 开放式字体格式 (WOFF)
  • 原始的可安装的 TrueType 和 OpenType（未设置嵌入权限）
• 具有新增的和更新的字体属性的高级版式功能：
  • 新增的 font-stretch 属性
  • 更新的 font-weight 和 font-size 属性，它们使其呈现行为在其他浏览器中更加一致。

另外，Internet Explorer 9 利用硬件加速的 Microsoft DirectWrite API 和子像素 Microsoft ClearType 字体定位（在 IE9 标准模式中），可比以前更快地呈现字体，且字体看起来更平滑。 （有关 Internet Explorer 9 中的字体硬件呈现的详细信息，请参阅 IE 团队博客上的 IE9 中的子像素字体。）

本主题包含以下几节：

 

• Web 字体入门
  • font 元素
  • CSS 字体属性
  • 字体嵌入
  • 其他解决方案
  • WOFF 格式
• 使用 Internet Explorer 9 升级您的 Web 字体： 快速入门
  • Web 字体服务
  • “免费”字体
• 使用 Internet Explorer 9 升级您的 Web 字体： 自己动手
  • 启用基本字体链接
  • 启用链接字体的变体
• 相关主题

Web 字体入门

如果您为 Windows Internet Explorer 的多个版本设计网页，则建议您阅读本节内容。 若要全面了解有关网页中的字体样式的选项，回顾一下以前在 Internet Explorer 中可用的一些选项是很有用的。 有关 Internet Explorer 9 中的字体的新增功能的信息，请参阅本主题后面的使用 Internet Explorer 9 升级您的 Web 字体： 快速入门。 如果您正好要了解版式，请参阅 Microsoft 版式网站上的 Windows 字体概述。

font 元素

Web 版式的概念是从 font HTML 元素（现已废弃）开始的。 例如，以下标记将 font 元素内的文本更改为以 Arial Black 字体呈现：

尽管上述标记仍可在 Internet Explorer 9 中使用，但 font 元素和其他与格式相关的 HTML 元素存在一个问题，即它们将呈现与内容混合在一起。 这就使内容管理和维护变得很困难，这也是为何开发 层叠样式表 (CSS) 的主要原因。 font 元素是 HTML 中已弃用的元素，不建议使用。

CSS 字体属性

CSS 的出现引入了操作 Web 版式（字体）的新方法。 CSS 字体属性为您提供了更多的选项，并极大地提高了您在设计网站字体时的灵活性。 层叠样式表 (CSS)，级别 1 (CSS1) 规范首先定义了字体系列和字体样式。 有五个通用的字体系列，所有的字体都可以划分到这几个类别中： serif、sans-serif、monospace、cursive 和 fantasy。 万维网联合会 (W3C) 对通用 CSS 字体系列进行了清楚地解释和直观概述： Web 样式表 – CSS 提示和技巧： 字体系列。

从 Microsoft Internet Explorer 3.0 开始，就一直支持 CSS1 中定义的基本字体样式属性。 为了您方便起见，此处对这些属性进行了总结。

• font-style：用于设置字体的样式（italic 或 oblique）。
• font-variant：用于设置是否应使用字体的小型大写字母变体（small-caps）。
• font-weight：用于设置字体的粗细；值可以是一个关键字 (normal、bold、bolder、lighter)，也可以是一个数字（100 到 900 之间的 100 的整倍数，包括 100 和 900；400 等效于 normal 关键字，而 700 等效于 bold 关键字）。
• font-size：用于设置字体的大小；值可以是绝对大小关键字（xx-small、x-small、small、medium、large、x-large、xx-large）、相对大小关键字（larger 或 smaller；与父对象的字体大小相比）、长度（使用 受支持的长度单位之一）或百分比（相对于父对象的字体大小）。
• font-family：用于设置要用于文本的字体列表。 如果第一个列出的字体在用户的系统上不可用，则将使用下一个字体；如果下一个字体也不可用，则将使用下下个字体，依次类推。 值可以是字体名称（例如，Arial）或通用关键字（serif、sans-serif、cursive、fantasy 或 monospace）。 通常，最先列出字体名称，然后在末尾加上一个通用关键字作为最终回调。
• font：一个速记属性，用于按照给定顺序在一个属性中设置最先列出的六个属性。

W3C 包含 CSS 字体样式的很清楚的直观概述： Web 样式表 – CSS 提示和技巧： 字体样式。

字体嵌入

通过使用 CSS @font-face 规则实现的字体映射的概念是随着 Microsoft Internet Explorer 4.0 和 层叠样式表 (CSS)，级别 2 (CSS2) 出现的。 字体嵌入是 Internet Explorer 9 中的字体链接概念的基础，它会将 嵌入式 OpenType (EOT) 字体文件连同您的网站的其他支持文件放置到您的 Web 服务器上。 在您的 CSS 内部，您将包括一条 @font-face 规则以告诉浏览器查找所引用的字体对象的位置，并将该字体对象与给定的 font-family 值进行关联。

但是，在 Internet Explorer 9 之前的 Internet Explorer 版本中，@font-face 规则只能与 EOT 字体对象一起使用。 尽管 Internet Explorer 9 仍可使用 EOT 对象，但会将 EOT 视为“旧式”字体技术。 从今以后，建议 Web 设计人员抛弃使用 EOT。 （有关 Internet Explorer 中的字体嵌入的详细信息，请参阅About Font Embedding。）

其他解决方案

若要使用除 Web 安全字体之外的其他字体，还需要抛弃特定于浏览器的方法（例如，EOT，尽管过去曾将其作为潜在标准提交到 W3C，但从来没有被任何其他浏览器供应商采用）。 在 Web 上搜索 web type workaround（Web 字体变通方案）或此字符串的某种变体，您会找到数百种跨浏览器 CSS 变通方案、基于图形的解决方案（例如，Cufón）和插件（例如，sIFR）。 然而，每个变通方案均有缺点和折衷之处（涵盖服务器存储要求、带宽使用增加、可访问性下降，等等）。

解决这个难题需要一个可互操作的 CSS 语法（即，@font-face）和一个常用 Web 字体格式。 WOFF 就是从这里而来的。

WOFF 格式

Internet Explorer 9 引入了对 WOFF 的支持。WOFF 由 Mozilla 开发，并由 Mozilla、Opera 和 Microsoft 于 2010 年提交给 W3C。在撰写本文时，WOFF 是 W3C工作草案。WOFF 基本上是其他字体格式的压缩包装：TrueType、OpenType 或开放字体格式（称为基于 sfnt 的字体）。 这使得它成为 Web 字体的通用选择。

支持 WOFF 的浏览器供应商和造字公司正在快速增加。 本主题的其余部分将演示如何开始使用 WOFF、Internet Explorer 9 和 @font-face 规则的扩展功能。

使用 Internet Explorer 9 升级您的 Web 字体： 快速入门

本节主要针对尚未获得 Web 专用字体的许可的开发人员。 当您使用 Internet Explorer 9、CSS3 和新的 WOFF 时，可以很轻松地实现复杂的 Web 版式并使用除 Web 安全字体之外的其他字体。 由于有很多造字公司和字体创建者可提供直接在 Web 上使用的字体，因此，您只需单击几下鼠标并利用最少量的 HTML 和 CSS 来轻松实现给人印象深刻的 Web 字体。

Web 字体服务

大多数造字公司通过 Web 字体服务提供了很多可供 Web 使用的字体。 实际上，在您预订其中的某个 Web 字体服务之后，您的网页将从相应的 Web 字体服务中检索您在 CSS 中指定的特定字体，并使用这些字体来显示文本。 尽管大多数此类服务需要预订，但有一些服务会提供免费试用以及针对基本使用的不收费计划。 其他服务只需要针对每种字体的下载和永久许可收取一次性费用。

注意  如果您已经购买了某种 Web 字体的许可，并需要了解如何在您的网站上显示该字体，请参阅使用 Internet Explorer 9 升级您的 Web 字体： 自己动手。

每个 Web 字体预订服务都有不同的实现方法，但以下列表说明了在注册服务之后开始操作的基本步骤：

1. 指定要使用该服务的字体的网站的网站域名。
2. 选择要在网站上使用的字体。 甚至特定造字公司拥有的 Web 服务除了提供自己开发的字体之外，还会提供多个造字公司开发的字体。
3. 输入与要使用您选择的字体的文本元素对应的 CSS 选择器，并使用网站的 UI 为每个对应的选择器分配一种字体。 通常，您需要从样式表中手动键入选择器的名称，它可以是元素、ID 或类选择器。
4. 然后，该 Web 服务将生成一个脚本块。 此脚本块包含对在该服务的服务器上承载的 JavaScript 文件的引用。 将脚本块粘贴到您的 HTML 的标头部分。

您在步骤 4 中粘贴到网页中的 JavaScript 引用将使 Internet Explorer 从该服务的服务器中检索合适的字体文件。然后，Internet Explorer 将根据您在步骤 3 中输入的选择器，使用您所需的字体显示文本。

尽管大多数 Web 字体服务是适合 WOFF 的，但它们还是与多个平台兼容，并支持多个浏览器和浏览器版本。 这使得这些服务成为让您的网站最大程度地与浏览器兼容的理想选择。 在 WOFF 支持变得更加广泛之前，您预订的服务将需要提供对多种字体格式的支持。

当您选择 Web 字体服务计划时，除了成本之外，还应考虑允许的最大页面查看数、可使用该服务的字体的最大网站数以及允许在每个网站上使用的最大字体数。 另外，有些服务允许您下载用来进行测试和设计的桌面版本的 Web 字体。 以下是一些受欢迎的 Web 字体服务的列表。 此列表在撰写本文时是准确的，但请记住，链接可能会发生改变。

• fonts.com Web Fonts，由 Monotype Imaging 提供
• FontsLive，由 Ascender/Monotype 提供
• Web FontFonts，由 FontShop 提供
• Typekit
• Typotheque Webfont Service，由 Typotheque 提供

另外，webfonts.info 包含 Web 字体源（免费、付费许可和预订）的完整列表。

“免费”字体

“免费”字体下载的诱惑力是很强的，但当您考虑这些字体下载时，请记住以下几点：

• 最重要的是，查看您要使用的字体的许可，确保您对该字体的预期使用符合许可准则。 如果它并未明确许可用作 Web 字体，则不要使用它。 类似地，检查许可是否限制为仅供某些类型的组织（例如，政府或非营利性组织与商业组织）使用。 Adobe（通过 Typekit 许可它的某些字体用作 Web 字体）在其 Web 字体许可常见问题解答中从造字公司的视角，对 Web 字体许可进行了很好的概述。
• 确保您所考虑的字体在相应的格式中可用。 例如，如果某种字体仅在 WOFF 中可用，则只有 Internet Explorer 9 的用户和其他非常新的浏览器的其他用户才能够按照您预期的方式体验您的网站的版式。 考虑到您的用户群体，这可能是可以接受的，但通常情况下，最好是尽可能启用对最广泛的浏览器和浏览器版本选择的支持。
• 确定您要使用的字体是否具有对您的网站的相应的语言支持。 如果您想要显示非拉丁语字符，则应确保您选择的字体支持它们。
• 不要盗用字体！ 仅仅因为您在 Internet 上找到了或您的计算机上安装了未受保护的字体，这并不意味着授权您将其用作 Web 字体。 同样，请查询您所考虑的字样的许可。 如果您无法找到该字体的许可，则不要使用它。

使用“免费”的字体与使用承载的解决方案相比，您可能将需要对网站的 CSS 执行稍多一些的工作。 您需要负责编写将跨目标浏览器和浏览器版本工作的字体规则。 如果您已获得 WOFF、原始的可安装的 TrueType、原始的可安装的 OpenType 或 EOT 字体并许可在您的网站上使用，则必须遵循使用 Internet Explorer 9 升级您的 Web 字体： 自己动手一节中的说明，使用这些字体设置您的网站样式。

数量日益增长的“免费”字体源使您能够自动创建一个包含您指定的所有字体文件格式的可下载的“工具包”，有时，甚至还会为您提供 CSS 以包括在您的样式表中。

以下是一些“免费”的字体源。 请记住，每种字体都有各自的许可（与“网站范围”许可相对）。 请确保在您决定将字体用作 Web 字体之前，阅读相关许可。 此列表在撰写本文时是准确的，但请记住，链接可能会发生改变。

• fontsquirrel.com： @font-face 字体包
• webfonts.info Wiki 条目： "Fonts available for @font-face embedding" （可用于 @font-face 嵌入的字体）

此外，webfonts.info 包含 Web 字体源（“免费”、付费许可和预订）的完整列表。

使用 Internet Explorer 9 升级您的 Web 字体： 自己动手

您可使用 Internet Explorer 9 轻松地实现复杂的 Web 版式。 如果您已具有授权用作 Web 字体的字体，则本节演示将这些字体链接到您的网站所需执行的操作。

以下屏幕快照是您要使用 HTML 和基本 CSS 向其中添加 Web 字体的网页的快照。

您可在此处查看此页面。 还可以下载它的 CSS 文件。

除了文本的两个代码段之外，此页面上的所有内容都使用 Verdana 显示。 Verdana 是最常见的 Web 字体之一，因为大多数流行的操作系统上都预安装了该字体。 在此练习中，我们将正文文本保留为使用 Verdana 显示，并更改标题的字体。

启用基本字体链接

字体链接是样式表用来声明然后引用您“链接”到一个或多个字体对象（文件）的 Web 字体系列的方法。 字体链接不同于字体嵌入，因为字体对象本身并未“嵌入”在网页上，并且也并非一定要驻留在与网页相同的服务器上（例如，使用预订字体服务）。 相反，字体对象是使用 CSS 链接到页面的。

提示  尽管 WOFF 可能会是未来的 Web 字体格式，但 Internet Explorer 9 也支持旧版嵌入式 OpenType (EOT)、“原始的”可安装的（未设置嵌入权限位）TrueType 和 OpenType 字体文件。 （若要检查某种字体是否为可安装的，请在 Windows 资源管理器 中右击字体文件，然后单击“属性”。 在“详细信息”选项卡中，查找“字体嵌入性”属性条目。 如果“可安装”未出现在“值”列中，则无法通过 Internet Explorer 9 将该字体用作已链接的字体。） 本主题的其余部分将以 WOFF 为例进行说明，但这些说明对于其他格式也是相同的。 不管其格式如何，在使用这些字体链接技术之前，请确保您已获得了许可，允许您将您的字体用作 Web 字体。

您可使用 @font-face CSS 规则来声明字体系列名称（以及在粗细和样式等方面的任何变体）。 例如，以下 CSS 将声明“MyFont”系列的基本形式，并将浏览器指向相应的字体资源。 如果您具有多种格式的授权字体以便最大程度地与浏览器和浏览器版本兼容，则只需在 src 声明后将这些字体包括在一个以逗号分隔的列表中。 在此示例中，“MyFont”在 WOFF、TrueType 和 EOT 格式中可用：

提示  在样式表的顶部将您所有的 @font-face 声明一起包含是一个很好的做法。

然后，通过您已声明的字体系列，在样式表或脚本块中引用此字体声明，或者在您的页面上以内联方式引用此字体声明。 例如，以下元素选择器将使每个包含“mySelector”类的元素使用 MyFont 系列呈现。

请记住插入多个回调字体系列名称（后跟一个通用关键字）以作为 font-family 属性的值。 这称为“字体堆栈”— 一个按优先顺序排列的字体列表，Internet Explorer 9 将迭代通过此列表，直至找到一种已在本地安装的字体。 （有关字体堆栈的详细信息，请参阅 Unit Verse 博客上的更好的 CSS 字体堆栈。） 不过，在选择字体堆栈时需谨慎。 如果用户的连接速度很慢或者存在网络干扰，则 Internet Explorer 9 将使用堆栈中指定的字体来显示您的内容，直至字体资源完成加载。

由于 @font-face 声明，您无需在此处或您引用 MyFont 系列的任何其他位置担心字体对象的名称 (MyFontFile.woff)。

在咖啡公司示例页中进行尝试。 感谢我们在 Ascender 的朋友，我们已经获得授权将他们的字体系列“Ayita Pro”用于本演示。

要点  适当的字体许可是在您的网站上启用字体链接的一个重要部分。 未授权在其他的任何地方使用此处和示例页面中所引用的字体。 您可通过使用 Ascender/Monotype 的 fontslive.com 来获取这些字体和许多其他的 Web 字体的授权。 有关字体许可的详细信息，请参阅本主题前面的“免费”字体。

对于本示例，我们使用 Ayita Pro 的常规粗细设置边栏标题的样式。 当前使用在如下样式表中显示的 "sidebarheading" 类选择器来设置边栏标题的样式：

边栏在页面中如下显示：

为了使用 Ayita Pro WOFF 字体来设置这些标题的样式，我们首先将以下 @font-face 声明添加到网页的样式表的顶部：

此声明的 font-family 属性指示该字体的此实例将称为“AyitaPro”。 @font-face 规则的 src 属性指示可在位于此网站上的字体文件夹中的 AyitaPro.woff 字体对象内找到该字体。

注意  Internet Explorer 9 默认情况下只接受指向字体资源的相对链接。 若要使用不同域中的字体，字体所在的服务器必须发送访问控制标头。 有关访问控制标头的详细信息，请参阅 XDomainRequest 对象。

若要将边栏标题的样式更改为使用 Ayita Pro，请向 "sidebarheading" 类选择器中添加单个 font-family 属性声明。

现在，边栏在 Internet Explorer 9 中如下显示：

可以查看修订过的页面。 还可以下载它的 CSS 文件。

这是链接字体最基本的形式。 也就是说，它具有常规的（非粗体）粗细，未应用任何样式（斜体或倾斜），并且既未紧缩也未展开。 您可通过使用这些变体的相应的属性名称来添加它们。 下面一节介绍如何指定字体粗细、字体样式和字体拉伸。

启用链接字体的变体

您可声明基于字体粗细（粗体）、字体样式（斜体）和字体拉伸（紧缩/展开）的链接字体的变体。 本节的大部分内容重点介绍如何基于粗细创建字体变体，但这些概念对于样式和拉伸是类似的。 （有关详细信息，请参阅本主题后面的字体样式变体或字体拉伸变体。）

字体粗细变体

您可声明某种字体的粗体（或相反地，纤细）变体。 执行此操作最简单的方法就是声明一个新的字体系列。 例如，Ayita Pro 字体包含一个 fat 粗细，这也是该字体可用的最宽的粗细。 可通过以下方法将我们的示例咖啡公司的页标题（当前使用 "title" ID 选择器设置样式）更改为使用 Ayita Pro Fat：首先，声明一个新的字体系列，然后，在 "title" 选择器中引用该系列。

页标题当前的外观如下所示：

它使用 "title" ID 选择器设置样式，如此处所示：

为了将页标题更改为使用 Ayita Pro Fat，我们向样式表的顶部添加一条新的 @font-face 规则。 这次，我们给它一个新的系列名，并将其指向相应的字体对象 (AyitaPro-Fat.woff)：

接下来，我们更新 "title" ID 选择器，添加 font-family 属性。 （我们还将加大字体的大小。） 请注意，我们无需移除 font-weight 属性，因为此字体变体的 @font-face 声明将会覆盖它。 这将确保不支持字体链接或 WOFF 的浏览器仍可以粗体显示标题。

页标题的外观现在如下所示：

可以查看修订过的页面。 还可以下载它的 CSS 文件。

如果您具有同一个字体系列的各种粗细，则可能使用其他方法来声明字体变体更简单一些。 您可保持系列名称不变，但是将 font-weight 属性（连同一个指向变体的字体对象的指针）添加到新的 @font-face 规则。 让我们看下面的示例：

此声明与前面的示例声明很类似，但是添加了 font-weight 属性并为其分配了一个 "bold" 值，同时所引用的字体对象包含不同的文件名： MyFontBoldFile.woff。在一个选择器中引用此字体变体，如下所示：

此方法有些类似于桌面发布应用程序（例如，Microsoft Word 或 Adobe InDesign）： 若要获取某种字体的粗体变体，您只需单击格式设置面板上的“粗体”按钮，而无需更改所选的字体。 将这个方法与第一种方法（其中，我们声明了一个新的字体系列）进行比较，看看哪种方法更像是将选定的字体本身更改为粗体变体（例如，在“字体”菜单上，将 MyFont 更改为 MyFontBold）。

接下来，我们声明 Ayita Pro 字体的粗体变体，并在我们的咖啡公司示例网页中使用它。 我们可使用它来设置页标题的样式，如下图所示：

已将页标题的样式设置为 h2，h2 包含以下选择器：

同样，使用我们的链接字体设置标题的样式的过程包括两个步骤。 首先，在文件的顶部添加以下 @font-face 声明：

请注意，我们尚未更改字体系列，但我们添加了粗体的字体粗体，并将字体对象的源更改为 AyitaPro-Bold.woff。为了将此字体应用到 h2 元素，我们通过添加字体系列名称 AyitaPro 来更改选择器。 （我们还会稍微加大字体大小。）

由于已在选择器中设置了字体粗细，因此，这是我们唯一需要进行的更改。 Internet Explorer 9 确定已将 font-family 属性设置为 "AyitaPro"，并且已将 font-weight 属性设置为 "bold"，并将显示此字体的粗体变体（与字体对象 AyitaPro-Bold.woff 对应）。

页标题的外观现在如下所示：

可以查看修订过的页面。 还可以下载它的 CSS 文件。

您可具有相同字体的不同的粗细变体。 例如，Ayita Pro 系列包含 thin、light、semi bold、black 和 fat 字体，这些字体都可以在相同的 CSS 字体系列中使用。 除关键字 normal 和 bold 之外，也可将 @font-face 声明内的 font-weight 属性设置为 100 到 900 之间的 100 的任意整倍数（100 为最细，而 900 为最粗）。 在这个系列中，400 对应于常规粗细，而 700 对应于粗体。

注意  在撰写本文之时，浏览器对于除常规粗细和粗体之外的字体粗细的支持各有不同。 如果您的网站以 Internet Explorer 9 之外的浏览器为目标，则应访问相应浏览器供应商的网站，以确定其对字体粗细的支持级别，并在这些浏览器中全面测试您的网站。

以下示例 @font-face 声明演示了如何指定一个数字字体粗细。

若要使用某种变体，请在适当的选择器中包括 font-family 属性和相应的 font-weight 值，如此处的 light（200 粗细）变体示例所示：

注意  @font-face 规则内的 font-weight 属性不接受与选择器中的 font-weight 属性相同的一组值。 具体而言，它不支持相对值 bolder 和 lighter。

如果未定义请求的粗细，则 Internet Explorer 将按照 font-weight property reference page 上的定义选择最接近的匹配项。

字体样式变体

您可指定某种字体的斜体或倾斜变体。 （oblique 字体是常规 (Roman) 字体的倾斜版本，而 italic 字体是一个字体系列的单独子集，其中包含每个字符的独特形状。） 此方法与用于粗细的方法相同，只不过使用的是 font-style 属性。

就像使用字体粗细变体一样，若要基于样式声明一个字体变体，应保持系列名称不变，但是将 font-style 属性（连同一个指向变体的字体对象的指针）添加到新的 @font-face 规则中。 以下示例声明阐释了此方法：

正如使用字体粗细变体一样，在引用字体样式变体时，使用字体系列名称和相应的字体样式类型（在此例中为 MyFont 和 italic）。

接下来，我们将结合了字体粗细和样式的变体应用到部分示例咖啡公司网页。 我们可以将 Ayita Pro 的 black italic 变体应用到产品标题，这些标题同时也用作指向产品页的链接。 （black 字体粗细通常在粗细上比 bold 粗一到两个级别。 例如，Ayita Pro 具有四个比常规字体要粗的粗细：semibold、bold、black 和 fat。） 下面显示了这些产品标题中的一个：

设置产品标题的样式的 CSS 包含在 "productlink" 类选择器中，如下所示：

注意  在 HTML 中，通过使用 h3 标记来设置产品标题的样式，h3 标记会自动将这些标题显示为粗体。 然而，当我们应用不同的粗细变体时，新的粗细将覆盖自动设置的粗细。

若要将 Ayita Pro 的 black italic 变体应用到这些标题，首先必须创建一个新的 @font-face 声明，并向其中添加 font-style 和 font-weight 属性：

接下来，由于选择器已向其应用了 italic 字体样式，因此，我们只需要指定字体粗细“800”（bold 的上一个粗细级别）和 AyitaPro 字体系列。 与前面的示例一样，我们可以添加 font-family 和 font-weight 属性，但是，此次我们将所有的字体属性替换为 font 速记属性。 （我们还会将文本稍微变大一些。） 在完成此操作之后，选择器将如下所示：

这将提示 Internet Explorer 9 使用 Ayita Pro 字体系列的 black italic 变体，并提供与以下选择器相同的功能：

产品标题的外观现在如下所示：

可以查看修订过的页面。 还可以下载它的 CSS 文件。

字体拉伸变体

利用 Internet Explorer 9，您现在可指定字体拉伸变体。 也就是说，您可通过使用 font-stretch 属性指定是否使用字体系列的常规、紧缩或展开字体。 与字体粗细变体类似，紧缩和展开也有一个等级序列（从 ultra-condensed 到 ultra-expanded）。

就像使用字体粗细和样式变体一样，在引用字体拉伸变体时，应使用字体系列名称和相应的字体拉伸类型（在此例中为 MyFont 和 condensed）。

注意  与粗细和样式不同的是，无法使用字体速记属性来指定 font-stretch 属性。

可将 @font-face 声明内的 font-stretch 属性设置为九个绝对关键字值（从最窄到最宽）中的任意一个。 这些关键字在此等级序列中的顺序如下：

• "ultra-condensed"
• "extra-condensed"
• "condensed"
• "semi-condensed"
• "normal" （无紧缩或扩展）
• "semi-expanded"
• "expanded"
• "extra-expanded"
• "ultra-expanded"

注意  @font-face 规则内的 font-stretch 属性不接受与选择器内的 font-stretch 属性相同的一组值。 也就是说，它不支持相对值 "wider" 和 "narrower"。