font-styleとは
- font-style とは次の語句からなるCSSのプロパティです。
- font
- 読み: フォント
意味: 書体 - style
- 読み: スタイル
意味: 型、様式、形式、文体
font-styleプロパティの概要
このプロパティはHTML要素に設定されたフォントが font-family の中で通常体、筆記体、斜体のどの文字体で表示するかを設定します。
文字のスタイル付けを行うには、標準(normal)、筆記体(italic)、斜体(oblique)の何れかで設定することになります。 筆記体と斜体は異なるものですが、日本語のフォントのように筆記体と斜体の違いが用意されていない場合は、 標準のフォントを斜めに傾けて表示します。結果として筆記体も斜体も同じような表示となります。
実機サンプルとサンプルコード
構文
セレクター{font-style: 設定値;}ここからは実際のHTML要素にプロパティを適用させて結果を見ていきたいと思います。
font-styleプロパティはテキストの表示スタイルを設定するためのプロパティなので、 どの要素で表示しても特にスタイルに変化はありません。 ここではdiv要素を使って内包されたテキストのスタイルの変化を見ていきたいと思います。
初期値: normal
このプロパティの初期値であるnormalキーワードは、書体を通常のフォントで表示します。
div{font-style: normal;}キーワード値: italic
italicキーワードを使うと筆記体のフェイスを選択します。もしfont-familyの中でitalicフェイスを使用できない場合は、 次項で説明しているobliqueフェイスを選択します。obliqueも使用出来ない場合はスタイルは人工的にシミュレートされます。
div{font-style: italic;}キーワード値: oblique
obliqueキーワードを使うと斜体のフェイスを選択します。もしfont-familyの中でobliqueフェイスを使用できない場合は、 スタイルは人工的にシミュレートされます。
div{font-style: oblique;}キーワード値: oblique angle値
obliqueキーワードに角度値を指定することで斜体の傾きの角度を指定することができます。 これはTrueType または OpenType の可変フォントを使用している場合に適用されます。
div{font-style: oblique 14deg;}グローバル値
font-styleプロパティに対してのグローバルキーワードは以下の3つです。 ただし、このキーワードはブラウザによっては、完全に機能するかは分かりません。
- inheritは親要素の値の継承を促します。
- initialは値を初期値のnormalに戻します。
-
unsetは継承の初期値に戻します。
※このプロパティは親要素の値を継承するのが基本なので、inheritと同じ働きをします。
セレクター{font-style: グローバル値;}補足説明
- すべての要素に適用可能
- 親要素の値を継承する
まとめ
ここでは、検証としてブロック要素とインライン要素に同じCSSを設定した場合の適用状態が確認できます。 コードの部分をクリックすると、サンプルにCSSが反映されます。
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 14deg;
サンプル: ブロック要素