normal通常体を選ぶ
初期値です。font-familyの中でnormalに分類された、傾いていないフォントフェイスを選びます。
font-style
文字を、通常体・イタリック体・斜体のどれで表示するか選ぶプロパティ。同じ英語の文章で、字形と傾きの違いを比べます。
CSSのfont-styleとは？
文字を通常体・イタリック体・斜体へ切り替える違いをライブプレビューで比べながら、normal・italic・obliqueと角度指定を初学者向けに解説します。
遊んでみよう
同じ書体で通常体・イタリック体・斜体を比較
EDITORIAL NOTEDesign with intention.The quick brown fox jumps over the lazy dog.
CSS
.element font-style: normal;
値のパターン
font-styleの構成要素
italicイタリック体の字形を選ぶ
書体に用意されたitalicフェイスを優先します。利用できなければobliqueや人工的に傾けた字形で代用されます。
oblique <angle>斜体と傾きの角度を指定する
obliqueは斜体フェイスを選び、任意の角度も加えられます。角度を省略すると14degとして扱われます。
早見表
初期値はnormalです。italicは専用にデザインされた字形、obliqueは傾いた字形を選ぶ値で、見え方は利用中のフォントによって変わります。
01
normal通常体のフォントフェイスを選ぶ初期値02
italicイタリック体のフォントフェイスを選ぶ専用字形03
oblique斜体のフォントフェイスを選ぶ既定は14deg04
oblique 20deg斜体の傾き角度を指定する-90〜90deg05
inherit親要素の指定値を受け継ぐグローバル06
initial初期値のnormalへ戻すグローバルよくある使い方
01
書名や作品名をイタリック体で示す
cite要素で意味を示したうえでitalicを指定し、本文と見た目を分けます。意味付けはCSSだけに任せません。
cite { font-style: italic; }02
短い補足ラベルへ傾きを付ける
短い英語の補足へobliqueを使い、通常の本文と視覚的な差を付けられます。
.note-label { font-style: oblique; }03
親から受け継いだ斜体を戻す
斜体の中にあるコードや固有名詞だけをnormalへ戻し、文字の読み分けを保ちます。
em code { font-style: normal; }ポイント
italicとobliqueは、フォントによって同じように見えることがある。
font-styleの初期値はnormalで、すべての要素とテキスト、::first-letter・::first-lineに適用でき、子要素へ継承されます。italicは専用に設計された字形、obliqueは斜めの字形を選びますが、該当フェイスがないとブラウザーが別のスタイルを選んだり人工的に傾けたりするため、見た目が近くなることがあります。長い文章の斜体は読みにくくなる場合があるため、短い範囲に留めます。強調の意味が必要な内容は、見た目だけでなくemなど適切なHTML要素も使います。
関連するCSSも見てみよう。
font-style と一緒に使われるプロパティや、詳しい外部リファレンスをまとめました。