基本的css font-weight属性不起作用

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

我希望短语“|无与伦比的功效”具有更轻的重量，“FIRE”目前没有发生，不确定为什么。

Answer 1

您的计算机上是否安装了所有字体粗细？

尝试添加重要！在你的css代码之后：

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

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

#unsurpassed p span {
color: #1D74B6; 
font-weight: 900 !important; 
}

看看这个jsFiddle：http://jsfiddle.net/GeUj3/1/

Answer 2

使用 bolder 或 bold 值以及 300 或 {{ 1}} 值并检查这项工作是否完美...

400

也可以使用 #unsurpassed { margin-top: 20px; font-size: 32px; font-family: "Myriad Pro"; } #unsurpassed p { color: #77787B; font-weight: bolder !important; } #unsurpassed span { color: #1D74B6; font-weight: 400; } 字。

检查此 DEMO jsFiddle

Answer 3

您在视觉上不会注意到font-weight 300和400之间的区别 您可以执行this

之类的操作

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

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

#unsurpassed p {
    color: #77787B; 
}

您可以检查不同的字体权重here

Answer 4

尝试使用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;
}

Answer 5

您使用的是有效的CSS，如果系统包含Myriad Pro的常规字体和浅色字体，则应该有效。大多数计算机都不包含其中任何一个;这是一个不同的主题，但可能会影响对此问题的分析，因为如果Myriad Pro不可用，您可能会以某种其他字体（浏览器的后备字体）查看呈现。

我无法测试确切的代码，因为我的系统缺少Myriad Pro，但是使用DejaVu Sans测试，而没有对代码进行其他更改，在Win 7上，我注意到IE 11显示“| DejaVu Sans Light中的无与伦比的功效，但Chrome和Firefox使用DejaVu Sans（常规），即使开发人员工具显示正在应用CSS规则。您可能遇到过类似的浏览器问题。

一般来说，比普通（400）更轻的字体通常在现代浏览器中效果不佳。解决方法是使用浅色字体，就像它是一个字体系列一样，具有正常的font-weight。这适用于为DejaVu Sans测试的浏览器。

因此，以下情况可能适用于您的情况：在#unsurpassed p的规则中，将font-weight: 300替换为font-family: "Myriad Pro Light"。

Answer 6

这是因为你没有把你的类ID放在你的html中，如果你不这样做，那么CSS就不知道该做什么了......你不能与类id元素发生冲突。

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

请记住，css类元素是全局的，所以标签是你希望css在适当的地方工作而不会发生冲突。