Googleのフォントの重量が効かないのはなぜですか？

Question

h1をに変更しようとしています。私を除いて：

.h1{ 
    font-weight: 300; 
} 

何も起こらなかった！

だから、他のテキスト要素のフォントの太さをテストするために、私はfont-weight: 200に、全体をカプセル化コンテナ、container-fluidを設定します。

.container-fluid{ 
    font-family: 'Work Sans', sans-serif; 
    font-weight: 200; 
} 

...そして唯一のカップルの要素が変更され、そのfont-weight（こちらを参照してください。 JFiddle）。残りは同じままでした。

どうしてですか？誰かが私にフォントウェイトh1の変更方法を示すことができたら、それは非常に感謝しています！

---

私はChromeが適切であれば使用しています。しかし、私もSafariでJFiddleを実行しましたが、同じ結果でした。私は私が私のCSSファイルの先頭に必要なすべてのフォントの重みをインポート

：

/*import custom font*/ 
@import 'http://fonts.googleapis.com/css?family=Work+Sans:100,200,300,400,500,600,700,800,900'; 

私はthis postが示唆したようにhttp:を使用してみました。何も変えなかった

Answer 1

font-weightプロパティは、次の要素へのブートストラップCSSファイルで500に設定されている：あなたは要素のフォントの太さを設定したい

.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 

場合は、より具体的であるセレクタを必要としますデフォルトのセレクタ（ブートストラップの）。例： .container-fluid h1 { font-weight: 100; }のようなより具体的なセレクタを書くと、要素に影響することがわかります。より具体的なCSSルールを無効にするには、CSSルールの後に推奨されていない、!importantを使用することもできます。

しかし、ページのすべてのスタイルを同じfont-weightで上書きすることは妥当ではありません。通常、例えば。タイトルのフォントウェイトは通常のテキストとは異なります。

EDIT：はあなたの例では、しかし、あなたは、単に代わり.h1クラスを選択するすべての<h1>要素を選択するh1セレクタを使用することができます。おそらくあなたは間違いを犯したでしょう。セレクタの特異性が同じ場合は、CSSスタイルシートの順序が関係します。ブートストラップのスタイルはカスタムスタイルの前に含まれているので、カスタムスタイルはブートストラップスタイルよりも優先されます。