Share via

CSS コーナー: フォントの全要素を使用する

  • Article

CSS3 @font-face ルール (英語) と WOFF フォント パッケージ形式 (英語) のクロス ブラウザー サポートが提供されるようになり、最近の Web 文字体裁は、"Web セーフ フォント" (英語) の領域をはるかに超えて拡張されてきています。New Yorker (英語) などの有名な雑誌では、記事の見出しに使った文字体裁の特徴が失われないように Web フォントを使用していますし、オバマ米大統領の再選キャンペーンでは、個性的なフォントを提供する Web フォントサービスの Typekit (英語) を利用しています。

まだ解決されていない制限があり、それが Web デザインでフォントの全要素を使用できない要因になっています。この制限というのは、多くのフォントに組み込まれている、OpenType® のさまざまなオプション機能を利用できないことです。これらの機能は、カーニング、上付き文字や下付き文字、合字などのコンテキスト字形、数字、代わりの東アジア グリフの利用、装飾的なスワッシュ字形など、基本的な文字体裁機能をサポートするグリフの置換や配置のオプションを定義しています。

例として、Gabriola に組み込まれている OpenType の "スタイル セット" (英語) を適用した場合に、どのようにテキストが表示されるかを見てみましょう。まず、従来の表示のテキストを示します。

スタイル セットが適用されていない Gabriola フォントの文字列

これが、スタイル セットを適用すると、次のように表示されます。

スタイル セット 6 が適用された Gabriola フォントの文字列

CSS3 フォント モジュールの最近の更新では、CSS 内でこのような OpenType 機能を公開する新しいプロパティ セット (英語) が追加されています。このプロパティは、次の 2 種類に大別できます。

  • 共通の OpenType 機能を特定のプロパティと値に明示的にマッピングするプロパティ。たとえば、font-kerning:normal はフォント内でエンコードされるカーニングのペアの調整を適用し、font-variant-numeric:tabular-nums は等幅の数字を有効にします。
  • 各フォントがサポートするすべての OpenType 機能を簡単に利用できるようにする font-feature-settings プロパティ。これは、使用されるケースの少ない、より高度な機能を利用するための "非常口" になるものです。

CSS プロパティ: font-feature-settings

IE10 の Preview 4 リリースには、font-feature-settings プロパティのサポートが組み込まれています。したがって、先ほどの Gabriola の例は、次のように記述できます。

p#demo {

font-family: Gabriola, cursive;

font-size: 24pt;

-ms-font-feature-settings: "ss06" 1;

}

上の -ms-font-feature-settings の宣言によって、このフォントがサポートするスタイル セットが有効になります (ss06)。このプロパティには、"normal" の値か、1 つ以上の機能をコンマで区切って指定します。前者の場合は、グリフの選択や配置に変更はありません。各機能は、4 文字の OpenType 機能タグと値を組み合わせて表します。上の例では、"ss06" が OpenType 機能タグで、スタイル セット 6 を表します。これに値 1 を割り当てることで、この機能を有効にしています。

登録された OpenType 機能のリスト (英語) では、利用できるタグが規定されています (タグはこちら (英語) にも記載されています。また、ISO によって標準化されています)。最もよく使われるタグは、次のとおりです。

OpenType タグ 有効になる機能
kern カーニング
liga 標準の合字
dlig 随意合字
smcp 小文字
subs 下付き文字
sups 上付き文字
swsh スワッシュ字形
ss01, ss02, …, ss20 スタイル セット 1 ～ 20

上記をはじめさまざまな機能の概要については、「FontFont OpenType ユーザー ガイド」(英語) の「Layout Features」(レイアウト機能) セクションを参照してください。各機能がわかりやすく説明されています。

さらによく使われる機能は、on/off スイッチです。機能に対して off または 0 の値を設定すると、機能が無効になり、on または正の整数の値を設定すると、機能が有効になります。機能の中には、整数の値を使用することで、いくつかのオプションを利用できる場合があります。通常、スワッシュ字形 ("swsh") では、このような数値によるオプション指定が可能です。機能に対して値が指定されていない場合は、値 1 を指定した場合と同じ動作になります。したがって、以下の宣言はいずれも、先ほどの Gabriola の例と同じ意味になります。

-ms-font-feature-settings: "ss06" 1;

-ms-font-feature-settings: "ss06" on;

-ms-font-feature-settings: "ss06";

特定のフォントでサポートされる機能を確認する

Adobe InDesign や Illustrator などのデザイン ツールでは、メニューやダイアログから OpenType 機能を簡単に利用できるようになっているほか、Word などのワード プロセッサでは、フォントの選択ダイアログで OpenType 機能をサポートしています。また、フォント ベンダーは、自社の製品がサポートする機能を文書にまとめています。ブラウザーを使用してフォントの機能を確認する方法については、今後の記事で説明する予定です。OpenType 機能を利用できるブラウザーが増えるに従い、フォント ホスティング サービスが、OpenType 機能の利用の促進や、利用状況の文書化にも力を入れるようになると思われます。

ブラウザーによるサポート

font-feature-settings プロパティは、現在 Firefox 4 以上と Internet Explorer 10 (Preview 4 リリース以降) がサポートしています。Firefox と IE が実装しているドラフト バージョンは異なるため、Firefox と IE で有効になる値の構文は異なります。たとえば、Firefox と IE の両方でカーニングを有効にするには、次のように記述します。

-ms-font-feature-settings: "kern" 1;

-moz-font-feature-setting: "kern=1";

–moz-font-feature-settings の詳細については、-moz-font-feature-settings (英語) を参照してください。

CSS3 フォントの標準化が進むに従い、CSS3 フォント モジュールで定義されている font-feature-setttings プロパティおよび作成者にとってより使いやすい font-variant プロパティとそれらの値をサポートするブラウザーは増えるでしょう。

また、font-feature-setttings プロパティは、@font-face ルールからダウンロードされた Web フォントであれ、名前によって参照されるローカル フォントであれ、すべてのフォント ファミリに適用されることに注意してください。

デモ

IE Test Drive (英語) サイトでは、Monotype Imaging (英語)、FontFont (英語)、The Font Bureau (英語) による、高度な OpenType 機能のデモ (英語) を公開しています。これらのデモでは、現在のフォントで利用できる、さまざまな文字体裁デザインの実例を確認できます。

この機能を試すのに、特殊なフォントは要りません。Windows 7 には、Calibri、Cambria、Consolas、Gabriola、Palatino Linotype などの OpenType 対応フォントが含まれています。また、Windows 8 Developer Preview では、Segoe UI と、Web セーフ フォントである Arial、Verdana、Georgia、Times New Roman、Comic Sans、Trebuchet に OpenType 機能を追加しました。

すべての OpenType 機能を Web フォントに組み込み、Web 制作に携わる皆さんにお使いいただけるようになったことを嬉しく思います。今後、さらに多様な文字体裁デザインを Web でお見かけすることを楽しみにしています。

— Internet Explorer 担当グループ プログラム マネージャー Sylvain Galineau