11

这是我的@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 中，只有粗体变体按预期工作，在任何其他情况下，使用粗体变体（即使是正常重量）。
这是一个已知问题还是有更好的方法来做这个声明？

4

2 回答 2

12

这里有两个单独的问题：

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

关键词

使用字体粗细关键字的问题似乎在于lighter，bolder它不是绝对值，例如normaland 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），这可能被认为是嵌入字体时必须支付的代价之一。

于 2013-03-11T15:47:31.773 回答
3

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

于 2013-03-11T15:58:12.127 回答