@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中，只有粗体变体按预期工作，在任何其他情况下，都会使用更加粗的变体（即使是普通字重）。 这是否是已知问题？还是有更好的声明方式？

- olanod

---

据我所知，关键字存在问题，请使用数值代替。 - Christoph

Answer 1

这里有两个独立的问题：

1. 使用 font-weight 关键字而不是数值。
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名称相关联时会出现显示问题。

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

• 当多个字重与一个字体家族名称相连时，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），那么这可能被视为在嵌入字体时必须付出的代价之一。

- Matt Coughlin

Answer 2

在font-face单一字体中，不需要使用引号来定义字体名称。您应该将其移除并运行，这样它就可以正常工作了。对于单一字体，font-family: santana; font-weight: 900; 不是必须的，只有多个字体才需要。使用数字值代替bolder应该可以正常工作。

- Web Designer cum Promoter

---

非常有兴趣知道这是否有所帮助，尽管在某些浏览器（例如IE8）中仍可能存在问题。 - Matt Coughlin

感谢指出这一点。我进行了一些测试。'bolder'具有相对值（比其父元素暗100），而'bold'具有绝对值（始终为700）。在这种情况下，错误似乎在于尝试将bolder视为绝对值。我所提到的IE8问题与关键字与数值之间的问题完全不同。 - Matt Coughlin