フォントの機能を使えるCSS3のFont feature settingsとは

CSS3でWebフォント機能が追加され、異なるデバイス上でも同じフォントの表示が可能になったことをご存じの方も多いと思います。CSS3のフォントに関する仕様ではその他にも様々な機能が追加されており、そのひとつが今回ご紹介するfont-feature-settingsプロパティです。

Webフォントで利用できるフォントフォーマットにはTTF(True Type Font)、OTF(Open Type Font)、EOT(Embedded OpenType)、SVG Font(Scalable Vector Graphics Font)、WOFF(Web Open Font Format)がありますが、その中でもOTFは組版に必要なタイポグラフィのオプション機能を持っています(OTFベースのWOFFであれば、同じようにオプション機能を保持しています)。たとえば、合字と呼ばれる複数の文字を結合した文字や、旧字体と呼ばれる字体がこれにあたります。font-feature-settingsプロパティを使うと、このオプション機能を利用することができます。

このプロパティはデバイスフォントだけではなく、Webフォントにも有効です。そこで今回は、Webフォント(大日本印刷オリジナルの書体である秀英体を使用しています)とFont feature settingsを使って、現段階で旧字体や合字の表示がどこまで可能か試してみました。

font-feature-settingsプロパティ

font-feature-settingsプロパティは、OpenTypeフォントの各機能の有効/無効を指定するプロパティです。機能を表すfeatureタグと、機能の有効/無効を示す値を組み合わせて使用します。たとえば、合字を表示する際には以下のような指定をします。先行実装の機能なので、ベンダープレフィックスを忘れずにつけておきます。(IE10ではベンダー プレフィックスを使うバージョンを非推奨にしているようです)
 

  .liga {
     -moz-font-feature-settings: “liga” 1;
   }

 
同時に複数の機能を指定したい場合は、カンマで区切って指定します。
  

  .dlig-vert {
     -moz-font-feature-settings: “dlig” 1,”vert” 1;
  }

 
利用できるfeatureタグ(上記では”liga”)は、こちらで確認することができます。OpenTypeフォントであればすべてのfeatureタグが使えるというわけではなく、フォントの実装によって搭載されているfeatureタグは異なります。それらの機能を、1で有効に、0で無効にすることができます。省略した場合は、1が指定されたと見なされるので、有効にする場合は値を省略しても良いでしょう。機能の有効/無効を示す値の種類は1,0の他に”on”,”off”が使えます。

Firefox 4.0からFirefox 14.0では、古いドラフトバージョンを実装していたため、FirefoxとIEでは有効になる値の構文が違う([参考]CSS コーナー: フォントの全要素を使用する)という情報もありますが、最新のFirefox 23(Win)では上記の構文が有効です。

フォントの機能については、CSS Fonts Module Level 3の第6章で定められています。font-variantの各サブプロパティにも同じ機能があります。たとえば、合字であればfont-variant-ligaturesというプロパティがこれにあたります。

表示例

では、実際の表示のされ方を見てみましょう。以降の表示結果画像の検証環境は、すべてFirefox 23.0.1(Win XP)です。左側が機能OFFの状態、右側が機能ONの状態です。
  

liga(欧文合字)

機能がONの場合、fとiがくっついて表示されていることが分かります。よく使われる機能のためか、Firefox 23では何も指定しなくても、デフォルトでONになっていました。

trad(旧字体)

jp04(JIS2004字形)

frac(分数)

分数の表示も可能です。HTML上では、1/100と記述するだけです。

nalt(修飾字形)

dlig(任意の合字)

vert(縦組み用文字)

ひと文字では分かりにくいですが、左側が横組み用の音引き、右側が縦組み用の音引きです。

vert、dligの組み合わせ

vert(縦組み用文字)とdlig(任意の合字)の機能を組み合わせて使ってみた例です。
 
これ以外にも、たくさんのfeatureタグがあります!今回、以下のfeatureタグについて検証してみましたので、一番困った表示結果と正しく表示された結果をご紹介します。

aalt (All Alternates:全ての異体字)
afrc (Alternative Fractions:分数の代替)
ccmp (Glyph Composition / Decomposition:字体組版/分解)
dlig (Discretionary Ligatures:任意の合字)
dnom (Denominators:分母)
expt (Expert Forms:エキスパート字形)
frac (Fractions:スラッシュを用いた分数)
fwid (Full Widths:全角)
hkna (Horizontal Kana Alternates:横組み用かな)
hojo (Hojo Kanji Forms:補助漢字)
hwid (Half-width:半角)
ital (Italics:欧文イタリック)
jp04 (JIS2004 Forms:JIS2004字形)
jp78 (JIS78 Forms:JIS78字形)
jp83 (JIS83 Forms:JIS83字形)
jp90 (JIS90 Forms:JIS90字形)
liga (Standard Ligatures:欧文合字)
nalt (Alternate Annotation Forms:修飾字形)
nlck (NLC Kanj Forms:印刷標準字体)
numr (Numerators:分子)
pkna (Proportional Kana:プロポーショナルかな)
pwid (Proportional Widths:プロポーショナル字形)
qwid (Quarter Widths:等幅四分字形)
ruby (Ruby Notation Forms:ルビ用字形)
sinf (Scientific Inferiors:下付き用数字)
subs (Subscript:下付き文字)
sups (Superscript:上付き用数字)
trad (Traditional Forms:旧字体)
twid (Third Widths:等幅三分字形)
vert (Vertical Writing:縦組み用字形)
vkna (Vertical Kana Alternates:縦組み用かな)
vrt2 (Vertical Alternates and Rotation:縦組み用回転字形)
zero (Slashed Zero:スラッシュ付きゼロ)

WindowsXP環境のChromeでは困ったことに、font-feature-settingsプロパティを指定するとWebフォントの指定が無視され、デバイスフォントにフォールバックされてしまいます。各OS,ブラウザでの検証結果については、次で紹介する表をご覧ください。

対応状況は?スマートフォンでは使える?

ブラウザの対応状況を知ることのできるサイト「Can I use…」でFont feature settingsの対応状況を確認すると、IE 10以降、Firefox 15以降、Chrome 21以降、Safari 7以降で対応していることが分かります(部分対応は除く)。モバイルブラウザでも、iOS 7、Chrome for Android 29ではサポートされるようです。

しかし、今回WinとMacそれぞれのFirefox,Chrome,Safariで検証を行ったところ、以下のような結果になりました。両OSで表示例のような結果が得られるのはFirefoxのみです。Mac版のほうが対応が進んでいることが分かります。一方モバイルブラウザは、iOS(ver.6.1.4)のMobileSafariでは未対応でしたが、Chrome for Android (ver.29.0.1547.72 / Galaxy Nexus, Nexus 7 ※どちらもAndroid 4.2.2)では対応していました。

WinXPWin7MacOSX(10.7.4)MacOSX(10.7.5)
Firefox23
Chrome29×Featuerタグを指定した箇所は、WEBフォントも無効に
Safari×(ver.5.1.7)×(ver.5.1.6)△ligaだけ有効(ver.6.0.5)

※フォントやfeatureタグによっては動作が異なる場合があります

Related Post

WebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれWebフォントをSVGからOTFに切り替えた際のハマりポイントあれこれ

先日、1年ほど前に公開したスマートフォン向け秀英体見本帳を更新しました!スマートフォン向け秀英体見本帳は、モバイルブラウザを対象としたWebフォントを使った縦組み表現に挑戦したコンテンツです。スマートフォン向け秀英体見本帳はこちらから、推奨動作環境等はこちらをご覧ください。 更新、といっても、見た目はほとんど変わらないのですが、Webフォントのフォント形式をSVGから他の形式に切り替えました。SVGフォントの場合は不具合なく表示されていたものが、WOFFやTTF、OTFに切り替えた場合に表示の不具合が出たりして意外に大変でした。モバイルブラウザでのWebフォント表現のノウハウが少なく、問題が不明で未解決のものもありますが、今回ハマったポイントをご紹介します。 検証端末 今回の検証に用いた端末の端末名/OSバージョン/ブラウザは以下です。 AQUOS PHONE SERIE ISW16SH

IllustratorからSVGを書き出して、SVGアニメーションを追加するIllustratorからSVGを書き出して、SVGアニメーションを追加する

iOS5のアップデートに伴い、Mobile SafariがインラインSVGに対応しました。そこで、このiOS5のMobileSafari向けに、キャラクターのイラストをIllustratorで書き出し、SMILアニメーションに挑戦してみました。   SVGをアニメーションさせる際の選択肢 SVGで書き出したグラフィックをアニメーションさせる場合、DOM操作、SMILアニメーションなどいくつかの方法があります。 ・SMILアニメーション・CSS3アニメーション・JavaScriptでの属性値変更・Canvasアニメーション SVGの仕様は非常に大きく、アニメーション機能としてSMIL Animationをサポートしています。SMILとは、Synchronized Multimedia

Canvasに画像を複数枚重ねて描画するにはCanvasに画像を複数枚重ねて描画するには

HTML5のCanvasには画像を組み込むことができます。Canvas上に複数枚の画像(透過PNG)をレイヤー状に順番に重ねたり、重ねた後の画像を取得する方法を解説します。 画像のプリロード  画像を複数枚重ねる場合、単に描画のループを回してしまうと読み込みが完了されたものから表示れ、重ねる順番が保障されない為、描画の前に順にImageオブジェクトを先読みしておきます。 var fileArry = [‘imgName1’,’imgName2’…]; // 読み込みたい画像のパスの配列 var