2016-09-16

italicとoblique

イタリック体(シュッと斜めなやつ)とオブリーク体(クタッと斜めなやつ)が違うことは知っていたが、font-styleプロパティーの値としてのitalicとobliqueは互換だと勘違いしていた。どちらを指定してもイタリック体かオブリーク体のどちらか存在する方を使ってくれ、両方ない場合は擬似斜体を生成してくれると思っていたが、違うようだ。

A value of 'normal' selects a font that is classified as 'normal' in the UA's font database, while 'oblique' selects a font that is labeled 'oblique'. A value of 'italic' selects a font that is labeled 'italic', or, if that is not available, one labeled 'oblique'.

The font that is labeled 'oblique' in the UA's font database may actually have been generated by electronically slanting a normal font.

仕様のfont-styleプロパティーの項ではこう書かれている(CSS 2.2でも変わっていない)。つまりnormalなら通常書体だけを、obliqueならオブリーク体だけを探すものの、italicならまずイタリック体を探すが、見つからなかった場合はオブリーク体を探すというわけだ。そしてオブリーク体は場合によっては通常のフォントから機械的に斜めにしたもの(いわゆる擬似斜体)であるかもしれない、というわけだ。

このような対応関係になる。つまりオブリーク体をitalicで参照することはできるが、逆にイタリック体をobliqueで参照することはできない。

というわけでイタリック体があるのに斜体にすらなっていないメイリオの日本語部分で擬似斜体を出す方法があることがわかった。

Demo: Faux Oblique for Meiryo

.test {
  font-family: Meiryo, sans-serif;
  font-style: oblique;
}

メイリオがインストールされていない環境で、イタリック体があっても強制的に擬似斜体になるという問題がある。そのため使いどころはあまりない。