css - @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(及更早版本)。

关键词

使用 font-weight 关键字的问题似乎是 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)，这可以被认为是嵌入字体时必须付出的代价之一。