はじまりはじまり。
自由自在にフォントを使う！
一般的に、
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: 'フォントファミリー名';
src: url('eotファイルのurl'); /*for IE*/
src: local('フォントファミリー名'), /*ローカルにインストールされている場合*/
local('フォントファミリー名'), /*一応別名で複数していするとより安全？*/
url('woffファイルのurl') format('woff'), /*for Firefox3.6*/
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";
}
するとこんなかんじです。
ヘッダーにつかうぐらいがちょうどいいかもしれません。
では次回もお楽しみに。
