CSS/font

fontプロパティ

この章では、CSSでテキストのフォントに関連するスタイルを設定するためのプロパティを解説します。フォントはデザインや可読性に大きな影響を与えるため、適切な指定が重要です。

font

フォントに関するスタイルを一括で指定します。省略可能な値は省略することができます。

使用例:

font: italic bold 12px/30px Georgia, serif;

値の構成:
- fint-style
- font-weight
- font-size/line-height
- font-family

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プロパティを使うことで効率的に設定することも可能ですが、個別プロパティを使用することで細かい調整が可能です。