CSSのfont-styleプロパティ徹底解説!文字を斜体にして強調する方法

CSSのfont-styleプロパティを使うと、フォントにさまざまなスタイル特性を適用し、テキストに強調(エンファシス)を加えることができます。本記事では、CodePenのサンプルコードも用意しているので、実際に手を動かしながら一緒に学習していきましょう。

font-styleの構文と指定できる値

font-styleで使用できる主なキーワードは以下のとおりです。すべてキーワード形式で指定します。

font-style: normal;
font-style: italic;
font-style: oblique 30deg;
font-style: oblique;

さらに、font-styleは次のようなグローバルキーワードにも対応しています。

/* 親要素から値を継承 */
font-style: inherit;
/* ブラウザのデフォルト値 */
font-style: initial;
/* 親要素に値があれば継承、なければ初期値 */
font-style: unset;

「normal」は、指定したfont-familyの中にある通常のフォントを指します。

「oblique」では角度(-90度〜90度)を任意で指定することが可能で、角度を省略した場合は14度がデフォルトとして適用されます。

obliqueとitalicは互換的に扱われる場合がある点には注意が必要です。これはブラウザのサポート状況によるもので、特殊なフォントを使用している際に、ブラウザがobliqueを見つけられない、あるいはサポートしていない場合には、italicへフォールバックするなどの挙動を示します。

そのため、obliqueを使用する前に、お使いのブラウザでobliqueキーワードが完全にサポートされているかどうかを必ず確認しておきましょう。

それでは、h1見出しにスタイルを適用してみましょう。

h1.title {
  font-family: 'Tangerine';
  font-style: normal;
}

ここではGoogle FontsからTangerineフォントを読み込んでいます。このフォントのnormalスタイルは筆記体(cursive)であるため、そのままの形で表示されます。

このフォントの場合、italicやobliqueを指定するとさらに傾きが強くなりすぎるため、あえて適用しないほうがよいでしょう。

font-styleの主な用途

多くの場合、「normal」キーワードを明示的に指定するのは冗長です。したがって、font-styleプロパティの主な用途は、フォントをイタリック(斜体)にしてテキストを強調することだといえます。

段落に強調を加えるために、そのうちのひとつをイタリックにしてみましょう。

p.par {
  font-family: 'Indie Flower';
  font-style: italic;
}

Indie Flowerフォントを確認すると、regular(normal)スタイルしか用意されていないことがわかります。このような場合、傾きの効果はブラウザ自身が合成して表示しているのです!

まとめ

font-styleプロパティの挙動はfont-familyと密接に関わっています。また、obliqueキーワードのブラウザサポートが十分でない現状では、このプロパティの主な用途は、フォントをイタリックにしてテキストに強調を加えることになるでしょう。