html - 基本的 css 字体粗细属性不起作用

Question

我的 html:

<div id="unsurpassed">
  <p>
    <span>FIRE </span>| Unsurpassed Efficacy
  </p>
</div>

我的 CSS:

#unsurpassed {
margin-top: 20px;
font-size: 32px;
font-family: "Myriad Pro";
}

#unsurpassed p {
color: #77787B; 
font-weight: 300;
}

#unsurpassed span {
color: #1D74B6; 
font-weight: 400; 
}

我希望“| Unsurpassed Efficacy”这个短语比目前没有发生的“FIRE”轻得多，我不确定为什么。

Answer 1

尝试使用 normal 和 bold 作为 font-weight 而不是数字。

演示:http://jsfiddle.net/8rHbv/2/

CSS:

#unsurpassed {
    margin-top: 20px;
    font-size: 32px;
    font-family:"Myriad Pro";
}
#unsurpassed p {
    color: #77787B;
    font-weight: normal;
}
#unsurpassed span {
    color: #1D74B6;
    font-weight: bold;
}