Internet Explorer 8忽略CSS中的字体权重 [英] Internet Explorer 8 ignores font-weight in CSS

问题描述

所以我有问题明白为什么IE忽略我的CSS在这里。我有这个代码：

 < h2> Har dustadsnäteller kan dufådet？< / h2> 
  

没有什么奇怪或什么。
这里是渲染结果：

但此处是此HTML的CSS代码：

  .rubrik，h2 {
 font-family：Lato; 
 font-size：32px; 
 font-weight：normal; 
 line-height：38px; 
 font-variant：normal; 
 font-style：normal; 
 color：＃969696; 
} 
  

这清楚地说明H2应该具有正常呈现的文本显然是粗体，这里是正确的呈现（来自Safari）

因此，使用Internet Explorer 8包含的开发工具，我检查CSS解释， p>

根据我的理解，我在这里看到的是IE8对我的CSS的解释，可疑地缺少的是正常属性。 IE已经将CSS转换为单行版本的字体，但没有包括正常部分。现在，字体Lato是字体字体，并且字体面CSS在这里：

  @ font- face {
 font-family：Lato; 
 src：url（'/ media / fonts / Lato.eot'）; 
 src：local（'nofont'），url（'/ media / fonts / Lato.ttf'）format（'truetype'）; 
} 
 @ font-face {
 font-family：Lato; 
 src：url（'/ media / fonts / Lato-Bold.eot'）; 
 src：local（'nofont'），url（'/ media / fonts / Lato-Bold.ttf'）format（'truetype'）; 
 font-weight：bold; 
} 
 @ font-face {
 font-family：Lato; 
 src：url（'/ media / fonts / Lato-Bold-Italic.eot'）; 
 src：local（'nofont'），url（'/ media / fonts / Lato-Bold-Italic.ttf'）format（'truetype'）; 
 font-weight：bold; 
 font-style：italic; 
} 
 @ font-face {
 font-family：Lato; 
 src：url（'/ media / fonts / Lato-Italic.eot'）; 
 src：local（'nofont'），url（'/ media / fonts / Lato-Italic.ttf'）format（'truetype'）; 
 font-style：italic; 
} 
  

即使在font-weight的font-face声明中指定normal ，它不工作。所以我被困在这里，试图找出我做错了，没有IE包含font-weight：normal在声明H2 ...任何猜测？先感谢...

解决方案

我想你需要更改 font-family ：Lato; 每个fontface属性，因为IE可能会感到困惑。相反，尝试将 font-family：Lato-bold; ， font-family：Lato-italic 该字体有一个粗体的面孔（像Lato，并且你已经在字体属性中引用），那么你不需要为fontface属性添加 font-weight：bold;

这意味着对于你的字体， h2 ，你只需要把 font-family：Lato; 如果你想成为正常的非粗体版本。

So I'm having problems understand why IE is ignoring my CSS here. I have this code:

<h2>Har du stadsnät eller kan du få det?</h2>

I.e. nothing weird or anything. And here is the resulting rendering:

But here is the CSS code for this HTML:

.rubrik, h2 {
  font-family: Lato;
  font-size: 32px;
  font-weight: normal;
  line-height: 38px;
  font-variant: normal;
  font-style: normal;
  color: #969696; 
}

Which clearly states that the H2 should have "normal" as font weight, yet the rendered text is clearly bold, here is a correct rendering (from Safari)

So, using the included developer tools of Internet Explorer 8, I inspect the CSS interpretation, and that looks like this:

As I understand it, what I am looking at here is IE8's interpretation of my CSS, and suspiciously missing is the "normal" attribute. IE has converted the CSS to the one-line version of "font" but didn't include the "normal" part. Now, the font "Lato" is a font-face font, and the font-face CSS is here:

@font-face {
    font-family: Lato;
    src: url('/media/fonts/Lato.eot');
    src: local('nofont'), url('/media/fonts/Lato.ttf') format('truetype');
}
@font-face {
    font-family: Lato;
    src: url('/media/fonts/Lato-Bold.eot');
    src: local('nofont'), url('/media/fonts/Lato-Bold.ttf') format('truetype');
    font-weight: bold;
}
@font-face {
    font-family: Lato;
    src: url('/media/fonts/Lato-Bold-Italic.eot');
    src: local('nofont'), url('/media/fonts/Lato-Bold-Italic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: Lato;
    src: url('/media/fonts/Lato-Italic.eot');
    src: local('nofont'), url('/media/fonts/Lato-Italic.ttf') format('truetype');
    font-style: italic;
}

Even when specifying "normal" in the font-face declaration for font-weight, it doesn't work. So I'm stuck here, trying to figure out what I am doing wrong not to have IE include "font-weight: normal" in the declaration for H2... Any guesses? Thanks in advance...

解决方案

I think you need to change the name of the font-family: Lato; on each fontface property, as IE is possibly getting confused. Instead try putting font-family: Lato-bold;, font-family: Lato-italic etc. Also, if the font has a bold face (like Lato does and you have referenced in the fontface properties) then you do not need to add font-weight: bold; for a fontface property, as the font is already bold and adding the font-weight will just add faux-bold and make it look bad.

This means that for your h2, you only need to put font-family: Lato; if you want it to be the normal, non-bold version.

这篇关于Internet Explorer 8忽略CSS中的字体权重的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！