在 IE8 的网页上,我使用 font-face 在 CSS 中使用了 4 种自定义字体,每种字体中的两种字体属于同一个系列,用于粗体和普通粗细。
我发现 IE8 会随机将非粗体渲染为粗体,有时反之亦然。如果我坐在页面上,每次加载时都按刷新,文本就会发生变化,看起来是随机的。
我什至尝试让 javascript 仅在加载所有内容后才设置元素的字体 - 而且它仍然发生。
有人知道这是怎么回事吗?
最佳答案
在 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;
}
关于css - IE8随机渲染字体粗细,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15047267/