@font-face，字体变体

Question

这是我的@font-face 声明以支持不同的字体变体，在本例中是我字体的粗体和加粗版本。

@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: bold;
}
@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: bolder;
}

现在我只使用 Chrome 和 Firefox。在 Chrome 中，正常和粗体变体有效，但较粗体变体不起作用（保留“粗体”变体）。在 Firefox 中，只有粗体变体按预期工作，在任何其他情况下，使用粗体变体（即使是正常重量）。
这是一个已知问题还是有更好的方法来做这个声明？

Answer 1

这里有两个单独的问题：

1. 使用字体粗细关键字而不是数值。
2. 如果需要，支持 IE8（和更早版本）。

关键字

使用字体粗细关键字的问题似乎是 lighter 和 bolder 不是像 normal 和 bold 那样的绝对值（总是分别为 400 和 700），而是相对于既定的粗体的父元素（100 更亮或更暗）。可能无法将 lighter 和 bolder 视为绝对值。

正如@HTMLDeveloper 和@Christoph 所建议的那样，使用数值而不是关键字是解决此问题的简单方法，并且它本身可能是一个足够的解决方案（如果不需要支持 IE8）。

@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: 700;
}
@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
  font-weight: 900;    /* or whatever weight you need to use for "bolder" */
}

IE8 及更早版本

当多个权重或样式与同一个 font-family 名称相关联时，某些浏览器会出现显示问题。

我知道的具体问题：（可能还有其他问题）

• 当超过 1 个粗细与字体系列名称相关联时，IE8 会出现显示问题。
• 当超过 4 个粗细或样式链接到一个字体系列名称时，IE6/7/8 会出现显示问题。

解决方案是为每种字体变体使用唯一的font-family 名称：

@font-face {
  font-family: "santana";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
}
@font-face {
  font-family: "santana-bold";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
}
@font-face {
  font-family: "santana-bolder";
  src: url("data:font/ttf;base64,AAEAAAALAI....") format('truetype');
}

Typekit 等字体服务通常使用这种方法。如果需要对各种浏览器的支持（或至少，尤其是 IE8），这可能是您在嵌入字体时必须付出的代价之一。

Answer 2

在 font-face 单一字体中，字体系列名称的引号是不需要的。你应该删除并运行它会正常工作。 font-family: santana; font-weight: 900; 不需要单个字体，只需要多个字体。而不是更大胆地使用数值，它应该可以正常工作。