フォントの機能を使える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フォントを使用したスマートフォン向け秀英体見本帳を公開Webフォントを使用したスマートフォン向け秀英体見本帳を公開

秀英体とは、大日本印刷オリジナルの書体です。秋からMORISAWA PASSPORTで秀英角ゴシック、秀英丸ゴシックが提供開始されるにあたり、スマートフォン向け見本帳を作成しました。以前より、Flash版の見本帳を公開していましたが、今回はWebフォントサービスのRealTypeさまにご協力いただき、秀英明朝/秀英初号明朝/秀英横太明朝/秀英丸ゴ/秀英角ゴ金/秀英角ゴ銀の6 書体を試験的にWebフォント化し、HTML版を作成しました。推奨閲覧環境はiOS5以上、Android 3.2以上となっております。本コンテンツではWebフォント機能を使用しているため、環境によってはフォントが適用されない場合がありますので、あらかじめご了承ください。 Flash版はこちら>Flash見本帳HTML版はこちら>スマートフォン向け秀英体見本帳(※2013/3/29現在、リニューアルに伴い公開停止中です。ご迷惑をおかけいたしますが、よろしくお願い致します。)  チャレンジしたこと Webフォントでの縦書き表現 CSS3のwriting-modeプロパティを使用すると、テキストを縦書き表示することができます。しかし、writing-modeを指定したテキストにWebフォントを指定すると、かなだけグリフが寝てしまう問題(参照:縦書きにWebフォントを使いたい!けど使えるのか検証してみた)がありました。そのため、HTML版秀英体見本帳内の縦組み部分ではSVGのtext要素、JavaScriptを使った縦組みライブラリのNehanを使用して縦組みを表現しています。

Gruntで快適な環境を整備したい!【インストール編】Gruntで快適な環境を整備したい!【インストール編】

みなさんはHTML/JS/CSSベースの開発をする際、どんな開発環境で開発していますか?今回は快適な開発環境を目指して、Gruntというタスクの自動化ツールを使ってみます。使用するGruntのバージョンは0.4.1です。 Gruntとは…? Gruntとは、ファイルのコピーや削除、JS/CSSのminifyなどの作業を自動化してくれるビルドツールです。Node.jsベースで動作しており、コマンドラインで使用します。ファイルのコピーや削除は人の手が入るほどミスが発生しがちです。また、JS/CSSのminifyはオンラインで行えるものもありますが、修正の度にすべてのファイルに手動で実行するのは大変手間がかかります。このような単純作業を自動化して、効率化を図ることができるのがGruntです。 Gruntのインストール Gruntの動作には、Node.jsと、Gruntのコマンドラインインターフェースであるgrunt-cliが必要です。まず、この2つをインストールします。  ■Node.jsのインストール Node.jsはインストーラを使ってインストールします。Node.js公式サイトのトップページにINSTALLボタンがあるので、ここからインストーラをダウンロードしてください。画面の指示に従って進めて行けば、インストール完了です。コマンドプロンプトで「node -v」と入力し、バージョンが表示されればインストール成功です。

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

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