Web font collection / Impress PC
CSS3で新たに登場した「@font-face」規則によって、WEBページ上のテキストに対してどんなフォントでも適用できる「WEBフォント」という仕組みが利用できるようになりました。
これまでは、実行環境(個々人のパソコンやスマホ)に搭載されたフォントの範囲(MS Pゴシックなど)でしかテキストを表現することができませんでしたが、今や、フォントさえ手元にあれば、テキストも含めた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/
(平成26年7月6日 アシベズヘア@ashibehair_m/facebook/note/SUZURI)
ピンバック: 「TTF」からWEBフォント「EOT」「WOFF」「SVG」へ変換する方法 | materialize.jp