2012.1.17 Tuesday - 10:21

IE10がFirefoxに続きOpenTypeのフォント機能に対応

Internet Explorer 10 (IE10) がFirefoxに続き、OpenTypeのフォント機能 (OpenType features) に対応することが分かりました。今から1年以上前になりますが、Firefox 4で対応した旨の記事を当ブログでも書きましたが、ようやく他のブラウザでも対応し始めることになりました。

普段欧文組版をされている方は既にご存じかと思いますが、OpenTypeフォントには単なるフォントファイルではなく、様々な拡張文字・機能が仕込まれています。一例として、合字やスモールキャップ、スワッシュ、ライニング数字とオールドスタイル数字など、美しい欧文を組むためには必須の項目です。

CSSの記述方法をざっくり説明すると、CSS3においてはfont-variant-XXX:プロパティが定義されているようですが、現時点でサポートするブラウザがないため、Firefoxでは-moz-、IEでは-ms-のベンダープレフィックスを付加したfont-feature-settings:プロパティを使い、4文字の値を使います。

…ただこのプロパティの記述方法がIE10とFirefoxで異なるため注意が必要です。

例）スモールキャップを適用する場合
-moz-font-feature-settings: “smcp=1“; /*for Firefox*/
-ms-font-feature-settings: “smcp” 1; /*for IE10*/

何がともあれMicrosoft社が用意した実際のサンプルを見てみましょう。
一部適切な表示がされないところがありますが、Firefox4以上でもご覧いただけます（SafariやChromeは非対応）。

1. Best Dressed Fonts by FontFont


まずはFontFont社によるFF DIN RoundやFF Mister Kを使ったサンプル。横スクロールしていくと、チェックボックスがポイントポイントに置かれています。ON/OFFにすることでOpenTypeのフォント機能を切り替えることができます。OpenTypeのフォント機能って何なの？がよく分かりますね。

2. Spice Your Type by Monotype Imaging


Monotype Imagingによるスパイス商品のイラストを用いたポップなサンプル。こちらもチェックボックスを切り替えることで、OpenTypeのフォント機能を切り替えることができます。

3. The New Web Typography


Font Bureauによるスタイリッシュなサンプル。OpenTypeのフォント機能を項目ごとに分かりやすく説明しています。サンプルにあるテキストすべてがWebフォントである点に驚かされますね。

他、参考になる技術的な記事です。

これから他のブラウザも同様にサポートしていくと思われます。これまで紙媒体でしかできなかった、美しい欧文組版が少しずつ実現しています。今後も注目です。

PAGE TOP