第39回 自由自在にフォントを使う!テーブルレイアウトを卒業しよう

自由自在にフォントを使う!

一般的に、

Webページで使えるフォント=ユーザーのPCにインストールされているフォント

という認識をもっている方が多いのではないでしょうか?

そのため、Windowsであれば"MS Pゴシック"や"メイリオ"、Macは"ヒラギノ"ではなく、ユーザーのPCに存在するフォント以外をWebページで使いたければ画像にするのが常套手段 だったのですが、実は画像ではなくちゃんとした「文字」として、自由なフォントを指定する方法があります。

@font-faceとは

@font- faceはCSSでフォントを指定することができる規則です。CSS2.1では一旦廃止され、CSS3で再度定義される予定ですが、実は現在でもかなり多くのブラウザーで使うことができます。そして、この@font-faceでは、ユーザーのPCに存在しないフォントもWeb上のフォントファイルをダウンロードして表示させる、ということが可能です。いわゆるWebフォント、とよばれるものです。

@font-face対応ブラウザー


ブラウザー バージョン サポート
Internet Explorer 4.0~ Embedded OpenTypeのみ
Firefox 3.5~ TrueType、OpenType
3.6~ Web Open Font Format
Opera 10.0~ TrueType、OpenType
Safari 3.1~ TrueType、OpenType
Chrome 4.0~ TrueType、OpenType

IEが4から対応しているのは意外な事実ですが、IEはEmbedded OpenType、eot形式のフォントでないと表示できないという注意点があります。

@font-face記述方法

@font-face {
font-family: 'フォントファミリー名';
src: url('フォントファイルのurl');
}

@font-faceで指定したフォントを(X)HTMLで使うには次のとおり。

selector {
/*@font-faceで指定したフォントファミリー*/
font-family: フォントファミリー名;
}

また、もしユーザーがそのフォントを既に持っている場合のことも考慮する場合は次のようにします。(持っているならダウンロードする必要はないため)

@font-face {
font-family: 'フォントファミリー名';
src: local('フォントファミリー名');
src: url('フォントファイルのurl');}

さて、基本的な使い方は以上ですが、やっかいなのは対応するフォント形式がまちまちな点です。表を見れば分かるとおり、TrueType、ttf形式、または OpenType、otf形式が一番ひろく対応していますが、IEはNGです。そのため、クロスブラウザー対応するためには、複数形式での指定が必要になります。

ちなみに、Web Open Font Format、woff形式というのは、Firefoxがいちはやくとりいれた形式なのですが、Webフォントに最適化された形式で、軽いファイルサイズが売りです。Webフォントではフォントファイルをダウンロードすることになるため、ファイルサイズは重要な問題なんですね。

現在はFirefoxの 3.6~でしか使えませんが、今後は各ブラウザーの対応が進むと思われます。

クロスブラウザー対応を考えて、一番無難な指定順は次のようなかんじではないでしょうか。

@font-face {
font-family: 'フォントファミリー名'; /*for IE*/
src: url('eotファイルのurl'); /*ローカルにインストールされている場合*/
src: local('フォントファミリー名'), /*一応別名で複数していするとより安全?*/
local('フォントファミリー名'), /*for Firefox3.6*/
url('woffファイルのurl') format('woff'),
url('ttfファイルのurl') format('truetype');
}

使用上の注意

フォントファイルは別ドメインから読み込むことはできません。CSSファイルと同じドメインに配置しましょう。

また、レンダリングの挙動がブラウザーによって異なります。IE、Firefox、Operaは、フォントのDLが終わるまでデフォルトフォントで代替表示 をします。が、Webkit系のSafari、Chromeは、フォントのDLが終わるまで何も表示しません!

ので、使いすぎるとユーザビリティを著しく 損ねるかもしれません。デザインの自由度がとても高まるので、デザイナー的には使って楽しい技術ですが、用法、用量をよく考えることが大事ではないでしょうか。

流行?のMuseoをつかってみました。

@font-face {
font-family: 'Museo700';
src:local('Museo700') ,
url('Museo700-Regular.otf');
}
h1 {
font-family: "Museo700";
}

するとこんなかんじです。

@font-faceでWebフォントを使う

ヘッダーにつかうぐらいがちょうどいいかもしれません。

では次回もお楽しみに。(こう鈴木 航 (すずきこう)

次のページは…
よさげなエディターIntypeをためしてみた
関連リンク
鈴木 航 (すずき こう)
鈴木 航 (すずき こう)

XHTML、CSSなどのWeb関連技術を得意とする。かぼちゃの煮物が嫌い。

CSS 3分コーディング

RSSフィードで
最新情報を購読