IE8 随机渲染字体粗细答案

【问题标题】：IE8 Renders font weights randomlyIE8 随机渲染字体粗细
【发布时间】：2013-02-09 10:24:30
【问题描述】：

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

我发现 IE8 随机将非粗体呈现为粗体，有时反之亦然。如果我坐在页面上，每次加载文本时都按刷新，看起来是随机的。

我什至尝试让 javascript 仅在加载所有内容后才为元素设置字体 - 但它仍然会发生。

有人知道怎么回事吗？

【问题讨论】：

能否提供相关代码（可能在 jsfiddle 或 jsbin 中）以便我们复制？

标签： css internet-explorer web internet-explorer-8

【解决方案1】：

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

据他们说：

“Internet Explorer 6、7 和 8 每个系列最多加载四个权重。此外，使用两个密切相关的权重（例如，400 和 500）可能会导致仅正确加载一个权重。”

使用特定的变体似乎是解决此问题的方法。像这样（来自 Myfonts.com 网络字体工具包的 sn-p）：

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

【讨论】：

谢谢。这让我发疯了。