CSS/font
< CSS
fontプロパティ
[編集]この章では、CSSでテキストのフォントに関連するスタイルを設定するためのプロパティを解説します。フォントはデザインや可読性に大きな影響を与えるため、適切な指定が重要です。
font
[編集]フォントに関するスタイルを一括で指定します。省略可能な値は省略することができます。
- 使用例:
font: italic bold 12px/30px Georgia, serif;
- 値の構成:
font-family
[編集]テキストに適用するフォントファミリーを指定します。フォールバックとして複数のフォントをカンマで区切って指定することが推奨されます。
- 使用例:
font-family: Arial, sans-serif;
font-feature-settings
[編集]OpenTypeフォントの特定の機能を有効または無効にします。
- 使用例:
font-feature-settings: "smcp" on;
- 補足: "smcp"は小文字をスモールキャップにする例です。
font-kerning
[編集]カーニング（文字間の調整）を制御します。
- 使用例:
font-kerning: normal;
font-language-override
[編集]言語固有のグリフを指定します。
- 使用例:
font-language-override: "JAN";
- 補足: "JAN"は日本語向けのグリフを指定する例です。
font-size
[編集]フォントのサイズを指定します。
- 使用例:
font-size: 16px;
font-size-adjust
[編集]フォントの相対的なサイズを指定し、異なるフォント間での視覚的な大きさを調整します。
- 使用例:
font-size-adjust: 0.5;
font-stretch
[編集]フォントの幅を指定します。
- 使用例:
font-stretch: condensed;
- 値の例: normal, expanded, condensed など。
font-style
[編集]フォントのスタイル（例: イタリック体）を指定します。
- 使用例:
font-style: italic;
font-synthesis
[編集]太さやスタイルを合成するかどうかを指定します。
- 使用例:
font-synthesis: none;
font-variant
[編集]フォントのバリアント（例: 小文字をスモールキャップに変換）を指定します。
- 使用例:
font-variant: small-caps;
font-variant-caps
[編集]大文字や小文字の変形を指定します。
- 使用例:
font-variant-caps: small-caps;
font-variant-east-asian
[編集]東アジアの文字変形を指定します。
- 使用例:
font-variant-east-asian: jis78;
font-variant-ligatures
[編集]合字（文字を組み合わせて1つの文字にすること）の使用を指定します。
- 使用例:
font-variant-ligatures: no-common-ligatures;
font-variant-numeric
[編集]数字、分数、序数などの表示形式を指定します。
- 使用例:
font-variant-numeric: ordinal;
font-variant-position
[編集]上付き文字や下付き文字を指定します。
- 使用例:
font-variant-position: super;
font-weight
[編集]フォントの太さを指定します。
- 使用例:
font-weight: bold;
- 値の例: normal, bold, lighter, 100〜900（数値で指定可能）
まとめ
[編集]これらのプロパティを活用することで、フォントの見た目を詳細に制御できます。一括指定のfontプロパティを使うことで効率的に設定することも可能ですが、個別プロパティを使用することで細かい調整が可能です。