[解決済み] 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'>
関連
-
[CSSチュートリアル】シングルセレクトの折りたたみメニュー機能を実現するCSS
-
[CSSチュートリアル]CSSは、2列のレイアウト、固定幅の左側、適応するためのさまざまな方法の右側を達成するために
-
[CSSチュートリアル】検索ボックスの非表示機能を実現するCSS(アニメーションの順送り・逆戻りシーケンス)
-
[css3]ピュアCSS3でdivのinとoutの効果を順番に実現する
-
[CSSチュートリアル】height:100%と書いても効かない理由
-
[CSSチュートリアル】CSSカウンターを使った数字の並びの美化方法
-
[css3]グレーモードやブラックモードを実現するCSS3フィルター(フィルター)サンプルコード(Webページ用
-
[CSSチュートリアル】CSSで実現するTikTokのテキストジッター効果例
-
[CSSチュートリアル】ピュアCSSで作るスクロールシャドウ効果
-
[CSSチュートリアル】CSS複合セレクタの具体的な使用方法
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル】よくある2D変換を5つ実現するCSS
-
[CSSチュートリアル】CSSの新機能には、ページの再描画や並び替えの問題をコントロールする機能が含まれています。
-
[CSSチュートリアル】クールなネオン効果を実現するピュアCSS(デモあり)
-
[CSSチュートリアル】CSSで実現するイメージマッピングメソッド
-
[css3]グレーモードやブラックモードを実現するCSS3フィルター(フィルター)サンプルコード(Webページ用
-
[CSSチュートリアル】タイトルを上部に配置するスティッキーレイアウトを実現するためのCSS
-
[CSSチュートリアル】インタビュー必見!聖杯レイアウトとダブルウィングレイアウトの違いとは?
-
[CSSチュートリアル】CSSプリグラミング言語と詳細解説の違いについて
-
[css3]CSS3は本当にSCSSに取って代わるのだろうか?
-
[CSSチュートリアル]ドラッグ&ドロップ効果を実現するピュアCSSコード