italicとoblique

Georgia Proでのイタリック体と擬似斜体の比較

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

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.

15.4 Font styling: the 'font-style' property

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

-font-style: italicfont-style: oblique
イタリック体を持つフォントイタリック体擬似斜体
オブリーク体を持つフォントオブリーク体オブリーク体
両方持つフォントイタリック体オブリーク体
両方持たないフォント擬似斜体擬似斜体
Font Pattern and font-style Property

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


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

View Demo: Faux Oblique for Meiryo

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

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

追記

Firefox 47(と50)やInternet Explorer 11ではイタリック体が使われてしまうようだ。CSS Fonts Module Level 3を見るとitalicを使っても良いとなっているのでバグではない。しかしCSS 2.1を置き換えるCSS 2.2だと変わらずobliqueのみとなっている。バグを投げておいたが、モジュール側で置き換えられるべきなため、早まったようだ。リジェクトされたら改めてBlink側に投げる必要がありそうだ……。