【CSS Modules】font-styleプロパティの使い方

font-styleプロパティは、テキストのフォントスタイル、特に文字を傾ける「斜体」の種類を設定するために使用されるプロパティです。このプロパティを使用することで、テキストが通常のスタイルで表示されるか、イタリック体（italic）で表示されるか、または傾斜体（oblique）で表示されるかを制御できます。

指定できる主な値は以下の通りです。 normal: フォントを通常のスタイルで表示します。斜体ではない標準の文字になります。 italic: フォントデザイナーによって意図的にデザインされたイタリック体のフォントを使用します。多くのフォントは、通常の文字セットとは別にイタリック体のグリフ（文字の形）を持っています。 oblique: 通常のフォントグリフを機械的に傾けて表示します。この値は、指定されたフォントファミリーにイタリック体のグリフが存在しない場合に、ブラウザが通常のフォントを傾けて表示する際に特に役立ちます。

oblique にはさらに、oblique <angle> のように角度を指定することも可能です。例えば、oblique 10deg と指定すると、フォントが10度傾けられて表示されます。これにより、より詳細な傾斜の度合いを制御できます。

italicとobliqueの主な違いは、italicがフォントデザイナーによってデザインされた特定の斜体文字を使用するのに対し、obliqueは標準の文字を単に傾ける点にあります。一般的には、利用可能な場合はitalicが推奨されますが、italicがない場合にはobliqueが代替として機能することがあります。

このプロパティは、ウェブページのデザインにおいて、特定のテキストを強調したり、引用文や技術用語などを視覚的に区別したりする際に非常に有用です。テキストの視認性と美しさを向上させるために活用されます。

Copy
1selector {
2  font-style: normal | italic | oblique | initial | inherit;
3}

引数なし

引数はありません

戻り値なし

戻り値はありません