1. ホーム
  2. css

[解決済み] Google Fontsのスタイルとウェイトを指定する

2022-07-19 03:42:01

質問

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

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

font-familyの属性として、以下のものをすべて試してみましたが、ダメでした。

  • 'Open Sans Bold'
  • 'Open Sans 700' (オープン サン 700)
  • 'Open Sans Bold 700'
  • 'Open Sans:Bold'(オープン サン ボールド

googleドキュメント自体にはあまり助けはありません。これらのバリアントを表示するために 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'>