CSS font-weight 不能正常工作？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3367589/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
font-weight is not working properly?
提问by CppLearner
http://www.i3physics.com/blog/2010/07/dsfsdf/
http://www.i3physics.com/blog/2010/07/dsfsdf/
Here is an example.
这是一个例子。
The part where it said "PHP" (the right top corner) remained as slim as it was. here is part of the css code
写着“PHP”的部分（右上角）仍然像原来一样纤细。这是css代码的一部分
.wp_syntax_lang {
background-color:#3c3c3c;
position:absolute;
right:0;
padding:1px 10px 3px;
color:#ddd; font-size:9px; font-weight:800;
text-transform:uppercase;
-moz-border-radius-bottomleft:5px;
-webkit-border-bottom-left-radius:5px;
border-radius-bottomleft:5px;
}
I tried bold, bolder, 700, 800, 900 and is not working under FF.
我尝试了粗体、粗体、700、800、900，但在 FF 下不起作用。
回答by Rito
Its because the font size (9px) is too small to display bold. Try 11px or more and it works fine.
这是因为字体大小 (9px) 太小而无法显示粗体。尝试 11px 或更多，它工作正常。
回答by derekerdmann
Most browsers don't fully support the numerical values for font-weight. Here's a good article about the problem, and even tough it's a little old, it does seem to be correct.
大多数浏览器并不完全支持font-weight. Here's a good article关于这个问题，即使有点旧，它似乎是正确的。
If you need something bolder then you might want to try using a different font that's bolder than your existing one. Naturally, you could probably adjust the font size for a similar effect.
如果您需要更粗的字体，那么您可能想尝试使用比现有字体更粗的其他字体。当然，您可以调整字体大小以获得类似的效果。
回答by Simon East
font-weightcan also fail to work if the font you are using does not have those weights in existence – you will often hit this when embedding custom fonts. In those cases the browser will likely round the number to the closest weight that it does have available.
font-weight如果您使用的字体不存在这些权重，也可能无法工作——您在嵌入自定义字体时经常会遇到这种情况。在这些情况下，浏览器可能会将数字四舍五入到它确实可用的最接近的权重。
For example, if I embed the following font...
例如，如果我嵌入以下字体...
@font-face {
font-family: 'Nexa';
src: url(...);
font-weight: 300;
font-style: normal;
}
Then I will not be able to use anything other than a weight of 300. All other weights will revert to 300, unless I specify additional @font-facedeclarations with those additional weights.
那么我将无法使用除 300 以外的任何其他权重。所有其他权重将恢复为 300，除非我@font-face使用这些附加权重指定其他声明。
回答by Vilmar Rodrigues Martins
In my case, I was using Google's Roboto font. So I had to import it at the beginning of my page with its proper weights.
就我而言，我使用的是 Google 的 Roboto 字体。所以我不得不在我的页面的开头以适当的权重导入它。
<link href = "https://fonts.googleapis.com/css?family=Roboto+Mono|Roboto+Slab|Roboto:300,400,500,700" rel = "stylesheet" />
回答by Qasim Hafeez Mughal
i was also facing the same issue, I resolved it by after selecting the Google's font that i was using, then I clicked on (Family-Selected) minimized tab and then clicked on "CUSTOMIZE" button. Then I selected the font weights that I want and then embedded the updated link in my html..
我也遇到了同样的问题，我在选择了我正在使用的 Google 字体后解决了这个问题，然后我点击了 (Family-Selected) 最小化选项卡，然后点击了“CUSTOMIZE”按钮。然后我选择了我想要的字体粗细，然后将更新的链接嵌入到我的 html 中。
回答by nourza
For me the bold work when I change the font style from font-family: 'Open Sans', sans-serif;to Arial
对我来说，大胆工作时，我改变字体样式从 font-family: 'Open Sans', sans-serif;到Arial
回答by Liam Spencer
I removed the text-transform: uppercase;and then set it to bold/bolder, and this seemed to work.
我删除了text-transform: uppercase;然后将其设置为bold/ bolder，这似乎有效。
