CSS 选择器

CSS 选择器告诉浏览器将所使用的 Web 字体应用于何处,以及文本所用的字体的粗细和样式。

在您的 CSS 中使用字体系列名称

Web 项目页面列出了项目中每种字体的 CSS 字体系列名称、数字粗细和字体样式。单击“编辑项目”链接以查看每个项目的 CSS 详细信息。

将嵌入代码包括在文档中之后,请在 CSS 中使用这些字体系列名称以将字体应用于文本。例如:

h1 {
  font-family: "brandon-grotesque", sans-serif;
}

指定后备字体

如果用户的浏览器不支持 Web 字体或由于任何原因而无法加载,则改为使用 CSS 堆栈中的后备字体。

字体堆栈应至少包含一种跨平台统一可用的后备字体(例如 Georgia 或 Arial),后跟一种通用字体系列名称(例如 serif 或 sans-serif)。如果浏览器找不到第一种字体,则它将尝试第二种字体,依此类推。

使用多种粗细和样式

您可以在 CSS 中使用数字 font-weight 值来指定除“普通”和“粗体”以外的字体粗细。数字值通常对应于以下粗细:

  • 100 = 瘦体
  • 200 = 超细
  • 300 = 细体
  • 400 = 常规,书
  • 500 = 中等
  • 600 = 半粗
  • 700 = 粗体
  • 800 = 中黑
  • 900 = 黑体

您可以在 Web 项目页面上找到您项目中所有字体的数字值。

例如,使用此 CSS 将粗细为 700 的字体应用于 h1 元素:

h1 {
  font-weight: 700;
}

在 Internet Explorer 8 中使用特定于变体的名称

Internet Explorer 8 为每个系列加载最多四个粗细,并且使用两个紧密相连的粗细(例如 600 和 700)可能导致只会正确加载一个粗细。Adobe Fonts 为这些版本的浏览器提供特定于变体的字体系列名称,以便控制这两个错误。

特定于变体的名称应根据需要添加在 font-family 堆叠的开头,在主系列名称之前:

#post-title {
  font-family: "brandon-grotesque-n7","brandon-grotesque", sans-serif;
  font-style: normal;
  font-weight: 700;
}

名称的组成方式如下:最开始是常规的字体系列名称,然后是破折号,再后面是一个字体变体描述(或 FVD)。例如,包含 700 粗细字体的 brandon-grotesque 的变体特定名称是 brandon-grotesque-n7

在没有这些问题的浏览器中,未定义特定于变体的名称,因此它们将在堆栈中的第二位使用完整系列名称。

大部分用户不需要使用这些附加字体系列名称。仅当特定地在 Internet Explorer 8 中看到字体正确显示的问题时,才需要添加它们。

Adobe 徽标

登录到您的帐户