従属欧文のイタリック

和文フォントはイタリックの従属欧文が含まれないことがけっこうある。たとえばヒラギノ明朝や源ノ明朝にはイタリックの欧文がなく、CSSでfont-style: italic;としても、ブラウザが擬似的に傾けるだけの、いわゆる「にせイタリック」になってしまう。そういった場合は欧文フォントを使うことになるが、ウェブでは欧文のサイズやウェイトを和文と調和するよう調整するのが難しいので、できれば従属欧文をそのまま使いたい。

最近はそういった要望に応えてくれるような、イタリックの従属欧文を持つ和文フォントが増えてきたようだ。ただ、CSSでイタリックを指定する方法はフォントによって異なり、font-familyプロパティを使うものとOpenType機能を使うものがある。

WindowsのメイリオやAdobe Fontsの貂明朝・貂明朝テキストなどはシンプルで、font-styleの値をitalicとすれば、和文は傾かずに欧文だけがイタリックになる（というか通常の和文とイタリックの欧文を組み合わせたフォントが選択される）。イタリック体がファミリー内のいちフォントとして用意されているので、ウェブフォントサービスの書体リストなどを見たときにイタリックの存在がわかりやすい。

em, i {
  font-style: italic;
}

一方、Macの游明朝体、Adobe Fontsの秀英明朝や凸版文久ゴシックなどは、OpenType機能のitalによるイタリックが使える。これらのフォントではfont-style: italic;を指定しても「にせイタリック」になってしまうため、まずnormalで立体にした上で、font-feature-settingsプロパティにitalキーワードを指定する。もちろんイタリックになるのは欧文だけで、和文は変化しない。

em, i {
  font-style: normal;
  font-feature-settings: "ital";
}

OpenType機能はフォントごとにどれが使えるのか分かりづらく、だいたい実際に試してみるまで気づかない。僕も游明朝体でitalが使えるのを今日はじめて知った。