2010.11.11 Thursday - 12:52

次期Firefox 4ではOpenTypeフォントの機能をCSSから制御できる

3.5では@font-faceをサポートし、3.6ではいち早くWOFF形式をサポートしたFirefoxですが、現在開発が進んでいる次期Firefox 4では、OpenTypeフォント機能をCSS3から制御できるようになります。
【参考記事】Firefox 4: OpenTypeフォントのサポート

まずOpenTypeフォントについて、普段DTPをされている方は既にご存じかと思いますが、単なるフォントファイルではなく、様々な拡張文字・機能が仕込まれています。
一例として、合字やスモールキャップ、スワッシュ、ライニング数字、オールドスタイル数字などグラフィックの欧文組版では常に考慮しなければならない重要な要素です。

では実際にどのように、どのようなことができるのでしょうか？サンプルを用意してみました。

まずはCSSファイルにOpenTypeフォントを読み込む処理を記述します。今回はOpenType形式のみの略式記述です。詳しい記述方法ついては私が特集記事を担当したWeb Designing2010年8月号をご覧ください。
※今回はサンプル用にローカル環境にてAdobe Minionを使用しましたが、Adobe社のフォントは、Webフォントとしての使用を禁止しています。無論アップロードやWOFF等への変換自体も禁止です。利用したい場合は、WebフォントサービスのTypekitをご利用ください。

@font-face {
	font-family:'myMinion';
	src:url('MinionPro-Regular.otf') format('opentype');
}

body {
	font-family:myMinion;
	font-size:50px;
}

ポイントは2つあり、1つ目は、現段階ではMozilla系ブラウザのみの機能となっているため、-moz-font-feature-settings:を使う点です。
2つ目は、数多くあるOpenTypeフォントの機能を有効化させるには、その機能のタグを使ってON/OFFを切り換えるという点です。

では実際にスモールキャップ（小文字のXの高さに揃って見える大文字）を使ってサンプルを見てみましょう。
CSS側の記述は下記の通りとなっています。

.smcp { -moz-font-feature-settings: "smcp=1"; }

スモールキャップはsmcpというタグで認識されるため、これを=1で結ぶことにより、その機能がONとなります。逆にOFFにしたいときは=0とします。機能により例外はありますが、原則このやり方でほとんどを制御することができます。

【Standard Ligatures：liga】
合字（2つ以上の文字を1文字にしているもの）を見てみましょう。リガチャはligaがタグとなっているので、これをONにします。するとfi、fl、ffががくっつきました。

.liga {-moz-font-feature-settings: "liga=1";}

【Discretionary Ligatures：dlig】
プロフェッショナルが使うstやctの合字も実現できます。

.dlig {-moz-font-feature-settings: "dlig=1";}

【Oldstyle Figures：onum】【Lining Figures：lnum】
オールドスタイル数字（高さが揃っていない数字）やライニング数字（高さが揃っている数字）もこの通り。

.onum {-moz-font-feature-settings: "onum=1";}
.lnum {-moz-font-feature-settings: "lnum=1";}

【Fractions：frac】
数字分数もできてしまいます。HTML側は12/155と記述するだけです。

.frac {-moz-font-feature-settings: "frac=1";}

【Historical Forms：hist】
また先日の小林 章氏のセミナーでも話題になった、fのように見える昔のs。

.hist { -moz-font-feature-settings: "hist=1"; }

もちろん使用しているOpenTypeフォントがその機能を持っている必要がありますが、CSS側から簡単に制御することができます。“hist=1, frac=1”のようにコンマでつなげることも可能です。

…え、でもちょっと待って！どの機能がどのタグなのかが分からない？そんな方にご覧いただきたいのが、Microsoft社のサイトで公開されているリスト。他にもカーニングやユニケース、スワッシュなどに対応していることが分かります。
→ OpenType Layout tag registry – Registered features

上記のサイトを見ても、英語だしいまいち何を示しているのか分からない？そんな方におすすめなのが、FontFont社のOpenTypeフォントガイド。とても分かりやすいビジュアルで、上記サイトと組み合わせればバッチリです。
→ FontFont OpenType User Guide [PDF]

執筆段階でFirefox 4はβ版であり、一般ユーザーによるインストールは非推奨であとなっています。上述のライセンスのこともありますので、サンプルイメージはローカル環境でのキャプチャ画像です。また記述方法も含め、将来的に変更・廃止になる可能性も十分考えられますのでご注意ください。

…というわけでCSS3によるフォント制御は、実際に使えるレベルになるにはまだまだ先になりそうですが、今までブラウザ上ではできなかったことが、Webフォント (Webfonts)の技術発展と共に少しずつ実現できるようになってきました。現状はWebフォントサービスと組み合わせて使うしかないですね。

グラフィックデザイナーのみならず、Webデザイナーにとっても正しい欧文組版の知識を身につける必要が出てくると思います。嘉瑞工房・髙岡氏の著書「欧文組版」で勉強をしましょう（僕もですが）。

PAGE TOP