web-dev-qa-db-ja.com

Googleフォントのスタイルと重量の指定

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

リンクタグを使用して、Normal、Bold、ExtraBoldの3つの面をインポートしています。通常の顔は正しく表示されますが、CSSでフォントのバリアントを使用する方法がわかりません

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

  • 「オープンサンズボールド」
  • 「Open Sans 700」
  • 「Open Sans Bold 700」
  • 「Open Sans：Bold」

Googleドキュメント自体はあまりヘルプを提供していません。これらのバリアントを表示するためにCSSルールをどのように書くべきか、誰もが考えていますか？

cssfonts
100
Steven Garcia

通常の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'>
135
Marco Johannesen

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;

8
user6097020

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

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

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

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

9種類すべてのフォントのフォントが非常に少ないことに注意してください。

1
NetFool