基本的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

尝试用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 2

使用 bolder 或 bold 值与 300 或 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; 
}

也可使用 important word。

这个<<h3>检查kbd> 演示jsFiddle

Answer 3

你的电脑上安装了所有的字体权重吗?

尝试添加重要!在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 4

您使用的是有效的CSS，如果系统包含Myriad Pro的常规和轻字体，应该可以工作。大多数计算机都不包含这两种功能;这是一个不同的主题，但可能会影响这个问题的分析，因为如果Myriad Pro不可用，您可能会看到其他字体(浏览器的备用字体)的渲染。

我无法测试确切的代码，因为我的系统没有Myriad Pro，但是用DejaVu Sans代替测试，没有对代码进行其他更改，在win7上，我注意到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 5

您在视觉上不会注意到font-weight 300和400之间的区别你可以这样做

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

你可以在这里查看不同字体的粗细

Answer 6

这是因为你没有把类id放在你的html中，如果你不这样做，那么CSS不知道该怎么做。并且不能与class id元素冲突。

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

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