Css @字体，字体变体

这是我的@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中，只有粗体版本才能按预期工作，在任何其他情况下都会使用粗体版本（即使是正常重量）。

---

这是一个已知的问题还是有更好的方法来进行此声明？

这里有两个独立的问题：

使用字体大小的关键字而不是数值

如果需要，支持IE8（和早期版本） 关键词

使用字体权重关键字的问题似乎是

较轻的

和

粗体的

不是像

正常的

和

粗体的

那样的绝对值（总是分别为400和700），而是相对于父元素的既定粗体（100较轻或较深）。可能无法将较轻的<代码>和较粗体的<代码>视为绝对值

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

IE8及更早版本

当多个权重或样式与同一

字体系列

名称关联时，某些浏览器会出现显示问题

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

• 当超过1个权重链接到字体系列名称时，IE8会出现显示问题
• 当超过4个权重或样式链接到字体系列名称时，IE6/7/8会出现显示问题

解决方案是为每个字体变体使用唯一的

字体系列

名称：

@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），这可以被视为嵌入字体时必须支付的价格之一。

在字体面单字体中，不需要字体系列名称的引号。您应该删除并运行它，它将正常工作<代码>字体系列：桑塔纳；字号：900不需要单个字体，它只需要多个字体。不要更大胆地使用数值，它应该可以正常工作。

如果关键字出现问题，请尝试使用数值。非常有兴趣知道这是否有帮助，尽管某些浏览器（例如IE8）可能仍然存在问题。+1指出这一点。我做了一些测试“粗体”有一个相对值（比其父级暗100），而“粗体”有一个绝对值（总是700）。在本例中，似乎错误在于试图将其视为绝对值。我提到的IE8问题与关键字与数值的问题完全不同。

@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');
}