Web font collection / Impress PC

CSS3で新たに登場した「@font-face」規則によって、WEBページ上のテキストに対してどんなフォントでも適用できる「WEBフォント」という仕組みが利用できるようになりました。

これまでは、実行環境（個々人のパソコンやスマホ）に搭載されたフォントの範囲（ＭＳ Ｐゴシックなど）でしかテキストを表現することができませんでしたが、今や、フォントさえ手元にあれば、テキストも含めたWEBデザインを実現することが可能となっています。

しかし、このWEBフォント、ブラウザによって対応しているWEBフォント形式がバラバラであるという問題があります。主要ブラウザの全てに適用しようと思ったら、主要ブラウザの全てを網羅するだけのWEBフォントを用意しなければなりません。

主要ブラウザ別の「WEBフォント形式」対応表
http://www.materialize.jp/art/css3/6800/

上記対応表を見る限り、「TTF」「EOT」「WOFF」「SVG」の4形式が揃っていれば、主要ブラウザを全て網羅できます。

「TTF」さえ手元にあれば、「EOT」「WOFF」「SVG」は「TTF」を変換して取得することが可能です。その方法は以下を参照してください。

「TTF」からWEBフォント「EOT」「WOFF」「SVG」へ変換する方法
http://www.materialize.jp/art/css3/6859/

ここでは、主要ブラウザにCSSでWEBフォントを適用する方法を解説します。

■CSSで適用する方法

CSSで「WEBフォントの名称」と「読み込むフォントファイル」を関連付けるには、冒頭で述べた「@font-face」を用います。

WEBフォントの指定方法は、「Using @font-face | CSS-Tricks」で紹介されている記法が現時点での完成形と言われています。

以下の通りです。

[css firstline=”1″ highlight=”1,2,3,4,5,6,7,8″ title=”index.css”]
@font-face {
font-family: PixelMplus10;
src: url(‘../font/pixelmplus10-regular.eot’); /* IE9 Compat Modes */
src: url(‘../font/pixelmplus10-regular.eot?#iefix’) format(‘embedded-opentype’), /* IE6-IE8 */
url(‘../font/pixelmplus10-regular.woff’) format(‘woff’), /* Modern Browsers */
url(‘../font/pixelmplus10-regular.ttf’) format(‘truetype’), /* Safari, Android, iOS */
url(‘../font/pixelmplus10-regular.svg#svgFontName’) format(‘svg’); /* Legacy iOS */
}
[/css]

「@font-face」のディスクリプタ「src」では、複数のフォントファイルを「,（カンマ）」で区切って指定することが可能です。その優先度は記述した順になっており、その中から利用できるものが適用されます。

まず、仕様統一の動きがある「WOFF」を優先して指定し（5行目）、「WOFF」が適用されないブラウザの為に次に「TTF」を「,（カンマ）」で区切って指定します（6行目）。「SVG」は最後でいいでしょう（7行目）。

IEだけは「@font-face」においても特殊です。

IE9は、「,（カンマ）」区切りの指定方法に対応されておらず無効となってしまうので、単独での指定を行う必要があります（3行目）。IE6～8は、「,（カンマ）」区切りの指定方法に対応されていないのに加え、format指定も対応されていません。また、この対応されていない記述のままだとローカルのフォントまで探しに行ってしまうので、「?#iefix」を付けてそれ以降の読み込みをSTOPさせる必要があります。

以下に、上記CSSを適用したサンプルページを用意しています。

[css firstline=”10″ highlight=”10,11,12,13″ title=”index.css”]
#pm10 {
font-size: 20px;
font-family: PixelMplus10;
}
[/css]

是非、各ブラウザでの表示を試してみてください。

WEBフォント表示テスト | 6767 | materialize.jp | サンプル集 | アシベズヘア | materialize LLC.
http://www.materialize.jp/ashibehair/sample/art/6767/

Google Chrome 35.0（WOFF）

Firefox 30.0（WOFF）

IE 11（EOT）

Android 4.2.2（TTF）

iOS 7.1.1（WOFF）

（平成26年7月6日　アシベズヘア@ashibehair_m／facebook／note／SUZURI）