最近流行り？の「WEBフォント」を試しに実装してみた。
WEBフォントとは、
CSS3の@font-face機能の事。
自分のサーバーにフォントデータをアップして、
CSS3の@font-face機能で呼び出して、
どのPCでも同じフォントで表示されるようにする事です。
便利な「WEBフォント」
普通、
特殊なフォントを使用した部分は、
PC同士の互換性を考えて画像として書き出します。
画像で書き出すとは、こういう事。
WEBフォント便利そうですが、
本当に良い事ばっかりなんだろうか？
ということで、検証～！
WEBフォントと画像の比較
参照ページ：http://ascii.jp/elem/000/000/465/465458/
| 項目 | WEBフォント | 画像 |
|---|---|---|
| 編集、更新 | テキスト打ち直すだけなので簡単 | 画像の修正なので面倒 |
| SEO効果 | 高い（テキストなのでクローラーに判別される） | 低い（altしか読み込まない） |
| ページ読み込み （容量） |
フォントによって異なります。日本語フォントはかなり重なるし、英数字のフォントなら、画像の場合より軽くなります | 画像を多用している場合多少重くなりますが、WEBフォントで日本語を使用している場合よりは軽いかと思います |
| ブラウザ上でのテキストのコピー （反転など） |
可能 | 不可能 |
| アンチエイリアス | フォントに依存 | 画像作成時に指定できる |
比べてみると、
日本語はあまり向いていない可能性がありますね。。
ライセンスと対応ブラウザ
今回、試しに実装してみたのは「あんずもじ」。
「あんずもじ」は、
無償での利用は商用・非商用を問わないフォントですが、
Web上で配布・公開する場合には、
リンクが必要なフォントです。
ということで、リンク↓
■「あんずもじ」作者情報
【著作権者】 京風子（Kyoko） 氏
【作者ページ】http://www8.plala.or.jp/p_dolce/
このようにフォントにはライセンスがあるので、
実際に使うときは、調べてから利用して下さい。
対応ブラウザ（2011年2月現在）
あと、対応ブラウザのチェックをして下さい。
現在のところ、まだ実用化というレベルではなさそうです。
・Safari 5.03
・IE 6-9
・Firefox 3.6-4
・Chrome 8
・iOS 3.2-4.2
・Android 2.2-2.3
・Opera 11
実装手順
行きますよっ！
（スケキヨ風）
①フォントをダウンロード
WEBフォントとして使用できるフリーのフォントをダウンロードします。
（必ず、WEBフォントとして使用可能かどうか確認して下さい）
日本語のフリーフォント
WebFonts として利用できるフリーの和文フォント
漢字が使える日本語フォント 無料ダウンロード 46種類
国内初、無料で日本語のウェブフォントが手軽に利用できる「デコもじ」
②フォントデータの変換
ブラウザによって、対応するフォントの拡張子が異なります。
.eot（IE用）
.ttf（Safari、Opera用）
.woff（Firefox用）
クロスブラウザ対応させるには、
最低限、これらの拡張子のフォントが必要となるので、
必要な拡張子のフォントデータを、
フリーの変換ソフトを使って作っちゃいます。
「あんずもじ」は.ttfだったので、
新しく、.eotと.woffを作成しました。
TTC→TTFへ分解（メイリオで使いました）
メイリオフォントのttfファイルへの分割TTF→EOTに変換
ttf2eotOTF→TTF（色々できる？）
online font converterWOFFを作る
FireFox3.6bでWOFFフォントを試す
※サイトで変換用のデータをダウンロードして、フォントデータをドラッグドロップして使うタイプです。
③CSSでフォントデータを読み込む
記述は以下の通りです。
@font-face {
font-family: 'font1';
src: url(../font/anzu.eot);
src: local('hide from IE'),
url(../font/anzu.woff) format("woff"),
url(../font/anzu.ttf) format("truetype");
}
p.anzu {
font-family: 'font1';
font-size: 25px;
}
2行目の記述”hide from IE”は、IE対策用の記述です。
IE9以下ではsrcに一つより多くのフォントを指定すると、
ロードに失敗をしエラーになります。
この対応策は、他の方法もあるようです。
（コリスさんの方が正確なような気が…；）
IEを含めた主要ブラウザと各スマートフォンに対応した@font-faceの指定方法
@font-faceの１行目で指定している「’font1′」の部分は、
お好きな名前に設定して下さい。
後でbodyなどでfont-familyで呼び出す時に、
その名前を使用します。
…お気づきですね？
何故、好きな名前で設定するのか。。
そうです、WEBフォントは何個も設定できます！
@font-faceを設定したいフォントの個数ぶん羅列して、
好きな名前を付けて呼び出す、
これだけです。
ただ最初に書いた通り、注意が。
日本語フォントはかなり重いです。
ページを読み込むまでに時間がかかります。。。
1個でも時間かかるのに、
何個も設定するのはナンセンスですよ。
（英文フォントなら早いです）
完成！デモページ
ということで、無事完成ですよっ！
今回実装してみた感想ですが、
日本語フォントは容量の問題で実用的ではなさそうです。
英文フォントなら問題なさそうですね～。
