Googleフォントのスタイルと太さの指定

いくつかのページでGoogleフォントを使用していて、フォントのバリエーションを使用しようとすると壁にぶつかります。例：http : //www.google.com/webfonts#QuickUsePlace : quickUse/Family : Open+Sans

リンクタグを使用して、ノーマル、ボールド、エクストラボールドの3つの面をインポートしています。通常の顔は正しく表示されますが、CSSでフォントのバリエーションを使用する方法がわかりません

font-familyの属性として次のすべてを試しましたが、サイコロは試しませんでした。

• 「Open Sans Bold」
• 「Open Sans 700」
• 「Open Sans Bold 700」
• 「Open Sans：Bold」

グーグルドキュメント自体は多くの助けを提供していません。これらのバリアントを表示するには、CSSルールをどのように記述すればよいのか、だれでも知っていますか？

通常のCSSを使用します。

通常のフォントファミリーを次のように使用します。

font-family: 'Open Sans', sans-serif;

追加して、フォントの「ウェイト」を決定します

セミボールド

font-weight:600;

ボールド（700）

font-weight:bold;

太字用（800）

font-weight:800;

このようにフォールバックの証拠なので、Googleフォントが「失敗」した場合、バックアップフォントArial / Helvetica（Sans-serif）は、Googleフォントと同じウェイトを使用します。

かなり賢い ：-）

異なるフォントの太さは、ヘッダーのリンクタグURL（GoogleフォントURLのファミリークエリパラメーター）を介して明確にインポートする必要があることに注意してください。

たとえば、次のリンクにはウェイト400と700の両方が含まれます。

<link href='fonts.googleapis.com/css?family=Comfortaa:400,700'; rel='stylesheet' type='text/css'>

ここに問題があります：Googleからのフォントセットに存在しないフォントの太さを指定することはできません。フォントの下にある[参照]リンクをクリックし、[スタイル]セクションまで下にスクロールします。そこには、その特定のフォントで利用可能な各「スタイル」が表示されます。残念ながら、Googleは各スタイルのCSSフォントの太さをリストしていません。名前がCSSフォントのウェイト番号にどのようにマッピングされるかを次に示します。

Thin            100     
Extra Light     200
Light           300
Regular         400
Medium          500
Semi-Bold       600
Bold            700
Black           900

9つのウェイトすべてに含まれるフォントはほとんどないことに注意してください。

font-family:'Open Sans' , sans-serif;

光の場合： font-weight : 100; または font-weight : lighter;

通常の場合： font-weight : 500; または font-weight : normal;

太字の場合： font-weight : 700; または font-weight : bold;

より大胆な場合： font-weight : 900; または font-weight : bolder;

Googleフォントで指定されたウェイト値を使用できます。

body{
 font-family: 'Heebo', sans-serif;
 font-weight: 100;
}