IE8随机渲染字体粗细

Question

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

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

我甚至尝试过javascript只在加载所有东西后设置元素的字体 - 它仍然会发生.

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

Answer 1

在IE8中使用单个字体的多个权重和样式时,我遇到了同样的问题.Typekit有一篇文章解释了IE8及以下版本中的这个错误:使用多个权重和样式

根据他们:

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