IE8 随机渲染字体权重

问题描述

在 IE8 中的网页上，我在 CSS 中使用 font-face 有 4 种自定义字体，每种字体中的两种属于同一个系列，用于粗体和正常粗细.

On a webpage in IE8 I have 4 custom fonts in CSS using font-face, two of each font go to the same family for bold and normal weights.

我发现 IE8 随机将非粗体呈现为粗体，有时反之亦然.如果我坐在页面上每次加载时都按刷新，文本会发生变化，似乎是随机的.

I have found that IE8 randomly renders the non bold as bold and sometimes vice-versa. If I sit at the page pressing refresh each time it loads the text changes, seemingly randomly.

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

I even tried having javascript set the fonts for elements only after everything is loaded - and it still occurs.

有人知道这是怎么回事吗?

Any one know whats going on?

推荐答案

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

I've had the same issue when using multiple weights and styles of a single font in IE8. Typekit has an article that explains this bug in IE8 and below: Using multiple weights and styles

据他们说:

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

"Internet Explorer 6, 7, & 8 load a maximum of four weights per family. Additionally, using two closely-related weights (e.g., 400 and 500) may result in only one weight loading correctly."

使用变体特定似乎是解决这个问题的方法.像这样(摘自 Myfonts.com 网络字体工具包):

Using variation specific seems to be the way to solve this. Like so (snippet from a Myfonts.com web font kit):

@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 随机渲染字体权重的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！