1. TOP
  2. html&CSS入門
  3. CSSで文字の傾きを変える「font-style」(フォント スタイル)の使い方

CSSで文字の傾きを変える「font-style」(フォント スタイル)の使い方

文字を斜めに傾けるには「font-style」プロパティを使います。

font-styleは文字を傾けるためのプロパティです。斜体にしたり、通常に戻したりすることができます。

下記のように書きます。

font-style:値;

値には「normal/italic/oblique」のいずれか指定します。

font-styleの使い方

font-styleはキーワードを使って文字の傾き具合を指定します。

normal

font-style:normal;

通常表示です。ブラウザの初期値で何も指定しない場合、normalになります。

斜体を解除したい場合などに使います。

oblique

font-style:oblique;

斜体として用意されているフォントを表示します。

italic

font-style:italic;

イタリックとして用意されているフォントを表示します。イタリックがない場合、斜体を表示します。

斜体とイタリックの違い

斜体とイタリックは似ているようで、実は違うフォントのことを表しています。

イタリック

手書きの筆記体をもとにしたフォントです。

字が傾いていることが多く、もとが筆記体なので、アルファベットによっては形が変わるものがあります。

斜体

標準の文字を、単純に斜めにしたフォントです。

このように似ているようで、実は違うフォントなのです。

日本語フォントは「イタリック」が用意されていないことが多い

欧文フォントの中には「イタリック」と「斜体」がそれぞれデザインされていることがありますが、日本語のフォントで「斜体」はあっても「イタリック」が用意されていることはほとんどありません。

cssで「イタリック」を指定しても、イタリックがない場合は「斜体」が表示されるので、あまり違いを意識することはないのではないでしょうか。

基本的にはフォントを傾けたい場合は、「イタリック」と「斜体」どちらを指定しても日本語フォントの場合は「斜体」になるのですが、一応違いがあることは覚えておきましょう。

斜体すらないフォントもある

フォントの中には、「イタリック」も「斜体」も用意されていないものもあります。

例えば、windowsの標準フォントだった「メイリオ」などもその一つです。

このようなフォントの場合は、CSSで傾きを指定しても、フォントが用意されていないので、標準の文字が表示されます。

CSSが効いていない?と思ったら、フォントが「イタリック」もしくは「斜体」に対応していない可能性を疑いましょう。

まとめ

  • 文字を斜めに傾けるのは「font-style」プロパティを使う
  • 値には「normal/italic/oblique」のいずれか指定する
  • 斜体とイタリック違うフォントのことを示す
  • イタリックは手書きの筆記体を基にしたフォント、斜体は斜めにしたフォントを指す
  • 日本語フォントは「イタリック」が用意されていないことが多い