CSS: フォント
フォントに関する属性は、
ブラウザや環境に依存しやすいため期待した結果にならないことが多いといえます。
その中で、font-style, font-weight, font-size は比較的安定して使用できます。
- フォント名
- font-family: <family-name>, <generic-family>;
- generic-family → serif, sans-serif, cursive, fantasy, monospace
- OSに依存するフォント名は使用すべきではありません。書体は指定しないほうが無難でしょう。
- フォントスタイル
- font-style: normal | italic | oblique;
- small-capsフォントの指定
- font-variant: normal | small-caps;
- フォントの太さ
- font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
- normal = 400, bold = 700
- bolder, lighter は親要素との比較
- フォントの幅 (CSS2)
- font-stretch: normal | wider | narrower | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded;
- フォントの大きさ
- font-size: <絶対サイズ> | <相対サイズ> | <length> | <percentage>;
- 絶対サイズ → xx-small | x-small | small | medium | large | x-large | xx-large
- 12pt など、単位を用いた指定も可能。
- 相対サイズ → larger | smaller
- larger, smaller は親要素との比較。em, exは親要素のフォントサイズ(通常はその要素のフォントサイズを意味する)。
- フォントのアスペクト値(フォントサイズ / 'x'の高さ) (CSS2)
- font-size-adjust: <number> | none;
- 省略記法
- font: [ <font-style> || <font-variant> || <font-weight> ]? <font-size> [ / <line-height> ]? <font-family>