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

这里有两个不同的问题：

使用font-weight关键字而不是数值。
如果需要，支持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），这可能被认为是嵌入字体时必须支付的价格之一。

Answer 2

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

@ font-face，字体变体

2 个答案: