フォントの機能を使える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

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」と入力し、バージョンが表示されればインストール成功です。

ドットDNP「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」参加レポートドットDNP「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」参加レポート

5月7日、弊社のドットDNPにてゴールデンウィークのスペシャルイベント「ウェブから学ぶ電子出版の可能性~多様な読書スタイルを考える~」が開催されました。 株式会社ミツエーリンクスの木達一仁さんと、株式会社Gaji-Laboの山岸ひとみさんをお招きし、Webデザインにおけるアクセシビリティの取り組みと、サービスとしての読書体験についてそれぞれ講演いただきました。本記事では、その内容を抜粋してご紹介致します。 Webデザインにおけるアクセシビリティへの取組み 読書体験を考える ――サービスとしての読書体験 トークセッション セミナーを終えて Webデザインにおけるアクセシビリティへの取組み

主要なモバイルUIフレームワークを比較してみました主要なモバイルUIフレームワークを比較してみました

WEB標準技術でアプリケーションを開発するためのUIフレームワークが増えてきました。モバイルWEB向けの業務アプリケーション開発に有用なUIフレームワークを選定するため、主要UIフレームワークのUIコンポーネントを中心に調査を行いましたのでその結果をご紹介したいと思います。ドキュメントベースではありますが、業務アプリケーションの開発に必要な、フォーム要素やグラフ等の各種コンポーネントが揃っているか、スタイルのカスタマイズ有無、複数人開発に対応するためMVCフレームワークが統合されているか等に注目し調査を進めました。以下の項目に分けてご紹介していきます。 調査対象フレームワークの概要 対応環境 主要UIコンポーネント その他(CSS,MVCフレームワーク統合有無など) 特徴 調査対象フレームワークの概要  以下6つのフレームワークを対象に調査を行いました。