为什么谷歌字体重量不工作？ [英] Why is google font weight not working?

问题描述

我试图将 h1 更改为 font-weight：300 。除了当我做：

  .h1 {
 font-weight：300; 
 
 
 
 $ b $ p 
 
  
 
 <为了测试其他文本元素的字体重量，我将整个封装容器 container-fluid 设置为 font-weight：200 ：
  .container-fluid {
字体家族：'Work Sans'，无衬线字体; 
 font-weight：200; 
 
 
 
 
 
 
 ...只有几个元素改变了它们的 font-weight （请看这里： JFiddle ）。其余的保持不变。
 
 
 
为什么会发生这种情况？如果有人可以告诉我如何改变 h1 的字体重量，那将是非常感谢！
 
 
 
 
 
 
如果相关，我正在使用Chrome。但是我也在Safari上运行了我的JFiddle，结果也是一样的。 
 $ b 我在我的 CSS文件的顶部导入了所有需要的字体大小：
 
 
  / *导入自定义字体* / 
 @import'http：//fonts.googleapis。 ？COM / CSS系列=工作+三世：100,200,300,400,500,600,700,800,900' ; 
  
我尝试使用 http：作为这篇文章建议。没有改变任何东西。
解决方案 
  font-weight 属性是在引导程序的css文件中设置为500到以下元素： 
 
 
  .h1，.h2，.h3，.h4，。 h5，.h6，h1，h2，h3，h4，h5，h6 
  
如果你想设置一个元素的字体权重，你需要一个比缺省选择器（bootstrap）更具体的选择器。如果你写一个更具体的选择器，如 .container-fluid h1 {font-weight：100; } ，你会看到，它影响到元素。您甚至可以在CSS规则之后使用高度不推荐的！important 来覆盖更具体的CSS规则。
 
 
 
然而，用相同的字体重量覆盖页面的所有样式是不合理的。通常，例如标题的字体权重不同于普通文本。
 
 
 
 编辑：然而，在您的示例中，您可以简单地使用 h1 选择器选择所有< h1> 元素，而不是选择 .h1 类。你可能在那里犯了一个错误。如果您具有相同的选择器特性，则CSS样式表的顺序是相关的。自定义样式之前包含引导样式，因此您的自定义样式会覆盖引导样式。
 
I'm trying to change h1 to font-weight: 300. Except when I did:
.h1{
    font-weight: 300;
}
Nothing happened!

So to test the font weight on other text elements, I set the entire encapsulating container, container-fluid, to a font-weight: 200:
.container-fluid{
    font-family: 'Work Sans', sans-serif;
    font-weight: 200;
}
...And only a couple elements changed their font-weight (see here: JFiddle). The rest stayed the same.

Why is this happening? If someone could show me how to change the font-weight of h1, that would be very appreciated!



I'm using Chrome if that's relevant. But I also ran my JFiddle on Safari and it was the same result.

I imported all the font weights that I needed at the top of my CSS file:
/*import custom font*/
@import 'http://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900';
I tried using http: as this post suggested. Didn't change anything.
解决方案
The font-weight property is set to 500 in the bootstrap css file onto the following elements:
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6
If you want to set the font-weight of an element, you need a selector which is more specific than the default selector (of bootstrap). If you e.g. write a more specific selector like .container-fluid h1 { font-weight: 100; }, you will see, that it affects the element. You could even use the highly non-recommended !important after the CSS rule to override more specific CSS rules.

It is however not reasonable to overwrite all styles of a page with the same font-weight. Usually, e.g. titles have a different font-weight than regular text.

EDIT: In your example, however, you could simply use the h1 selector to select all <h1> elements instead of selecting the .h1 class. You probably made a mistake there. If you have the same specificity of the selector, the order of the CSS stylesheets is relevant. The styles of bootstrap are included before your custom styles, so your custom styles override the bootstrap styles.

                        
这篇关于为什么谷歌字体重量不工作？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！