Question

在IE8的网页上，我使用font-face在CSS中有4个自定义字体，每个字体中有两个字体用于粗体和正常权重。

我发现IE8随机地将非粗体渲染为粗体，有时反之亦然。如果我每次加载文本更改时都按下刷新页面，看似随机。

我甚至试图让javascript在加载所有内容后设置元素的字体 - 它仍然会发生。

任何人都知道发生了什么事？

Answer 1

在IE8中使用单个字体的多个权重和样式时，我遇到了同样的问题。 Typekit有一篇文章解释了IE8及以下版本中的这个错误：Using multiple weights and styles

据他们说：

“Internet Explorer 6,7和8每个家庭最多加载四个权重。另外，使用两个密切相关的权重（例如，400和500）可能只能正确加载一个权重。”

使用特定变体似乎是解决此问题的方法。像这样（来自Myfonts.com网络字体套件的片段）：

@font-face {
  font-family: 'AvenirNextLTPro-DemiIt'; /* Demibold Italic */
  font-style: italic;
  font-weight: 600;
  src: url('webfonts/25A826_1_0.eot');
  src: url('webfonts/25A826_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/25A826_1_0.woff') format('woff'),url('webfonts/25A826_1_0.ttf') format('truetype');
}

@font-face {
  font-family: 'AvenirNextLTPro-BoldIt'; /* Bold Italic */
  font-style: italic;
  font-weight: 700;
  src: url('webfonts/25A826_6_0.eot');
  src: url('webfonts/25A826_6_0.eot?#iefix') format('embedded-opentype'),url('webfonts/25A826_6_0.woff') format('woff'),url('webfonts/25A826_6_0.ttf') format('truetype');
}

.someclass {
  font-family: 'AvenirNextLTPro-DemiIt'; /* Demibold Italic */
  font-style: italic;
  font-weight: 600;
}
.otherclass {
  font-family: 'AvenirNextLTPro-BoldIt'; /* Bold Italic */
  font-style: italic;
  font-weight: 700;
}

IE8随机渲染字体粗细

1 个答案: