フォント

font-style

font-style は文字を斜めにするかどうかを指定します。イタリック体(italic)と、ふつうの字形を傾けた斜体(oblique)を選べます。

構文

normal | italic | oblique <angle [-90deg,90deg]>?

プレビュー

Aa
プリセット
右下の角をドラッグするとサイズを変えられます

コード

.box {
  font-style: italic;
}

コントロール

font-styleitalic
font-style
Aa

解説

値の書き方

  • normal:傾けません。初期値です。
  • italic:フォントのイタリック体を使います。イタリック体は斜めに書く前提でデザインされた別の字形で、a や f の形がふつうの字と違うことがあります。
  • oblique:ふつうの字形を傾けた斜体を使います。角度は -90deg〜90deg で書けて、省略すると 14deg です。正の値で右に、負の値で左に傾きます。

フォントに無ければ代わりを使う

イタリック体の無いフォントで italic を指定すると斜体で代用され、斜体も無ければブラウザが字を機械的に傾けます。日本語のフォントの多くはイタリック体を持たないので、日本語の文章は機械的に傾けた形になります。

oblique の角度がどこまで反映されるかは、フォントとブラウザによって違います。傾きの軸を持つ可変フォントなら、書いた角度で描けます。

気をつけること

  • em・i・cite などは、ブラウザの標準スタイルで italic になっています。傾けたくないときは font-style: normal を指定します。
  • font ショートハンドを書くと、省略した font-style は normal に戻ります。

コメント