フォントを "通常体" "イタリック体" "斜体" の何れで表示するかを指定する
Last update: 2008-08-19
font-style プロパティは、指定した要素の中でフォントをどのようなスタイルで表示するかを設定するプロパティ。スタイルには通常体イタリック体斜体の3種類プラス継承が用意されている。それぞれはプロパティ値に以下のキーワードで指定する
- 通常体
- キーワード: normal
- Helvetica を例にすると Regular といったように、通常、指定したフォントファミリの基本形を表示する
- イタリック体
- キーワード: italic
- 指定したフォントファミリの中のイタリック系フォント (italic, cursive, kursiv など) で表示する
- 斜体
- キーワード: oblique
- 指定したフォントファミリの中の斜体系フォント (Oblique, Slamted, Incline など) で表示する
- 継承
- キーワード: inherit
- 親要素に指定された値を継承する
フォントスタイルについて
欧文フォントにおいては、Italic と Oblique は傾斜したデザインを持ってはいるが、全く異なるフォントだ。
Italic は筆記体を元に発生した傾斜デザインのフォントで、明朝系 (serif) フォントに含まれるが、一部のゴシックフォント (Helvetica など) にもファミリとして存在することがある。
Oblique はゴシック系の基本フォントブロックにシアー (傾斜) を掛けたもので、Italic のように斜体フォントとしてデザインはされていない。
両者とも本来は使い方に意味があるのだが、現在は「強調」や「引用」といった、本文とは線を引く意味で使用されることが主流だ。
font-family に "Times New Roman" を指定して簡単な実験を行なってみる。
本来はこういったレンダリング結果になるはず。
- font-style: italic を指定した場合
- The quick brown fox jumps over the lazy dog
- font-style: oblique を指定した場合
- The quick brown fox jumps over the lazy dog
Times New Roman ファミリに Oblique は存在しないのだが斜体で表示される。ここで代用されているフォントは Times New Roman Italic だ。これはゴシック系でも同様、Italic が無い場合は Oblique を使ってレンダリングする。ブラウザはそういう仕様になっているようだ。
現状 Italic と Oblique のどちらを記述しても斜体系フォントでレンダリングされるが、そういうことからか、フォントを知らないからか、きちんと使い分けしているサイトは少ない。だがプロフェッショナルなウェブ制作者は正しく使い分けておくべきだ。
日本語環境
日本語フォントの斜体系ファミリフォントは、極一部の他には存在しない。そのため Italic と Oblique のどちらを指定しても疑似斜体としてレンダリングされる。ファミリに斜体フォントを用意していたとしても、正しくレンダリングされるかどうかは不明。よって、どちらを使用しても構わないようだが、曖昧な部分だ。
余談ながら、私には異文化なのでよく分からないが、Windows XP に標準でインストールされているフォントには Oblique と名前がつくフォントが見当たらないのだが、Windows では使い分けしないということだろうか？
