jump to navigation

Webフォント(Web Fonts)について 10月 8, 2009

Posted by hyhy in 技術情報.
Tags:
trackback

「Webフォント」(Web Fonts)という技術について。

Webフォントは、クライアントにインストールされていないフォントをWebページで自由に使えるようにする技術で、従来、好みのフォントを使った文字をWebページで表示するには、あらかじめ文字を画像化しておくしかなかったが、Webフォントなら使用したいフォントファイルをサーバーにアップロードし、CSSで読み込ませるだけで利用できます。

■フォント画像を使う場合と比較
・テキストの編集はテキストエディタで編集できる
・SEO効果の見込みは画像と比べて高い
・ファイルサイズは画像と比べて小さい
・テキストのコピー できる
・アンチエイリアス フォントに依存

 Webフォントは、Internet Explorer(IE)4以上、Firefox3.5以上、Safari3.1以上、Opera10以上と、2009年10月現在、すでに主要なブラウザーに実装されています。
とはいっても、IEとIE以外のモダンブラウザーではサポートするフォントのフォーマットに違いがあるため、実際に利用するにはちょっとしたテクニックが必要になります。

■Webフォント実装5ステップ
STEP.1:フォントをダウンロードする
STEP.2:フォントを読み込む(Firefox/Safari/Opera編)
STEP.3:EOTファイルを作る
STEP.4:IEにフォントを読み込ませる
STEP.5:クロスブラウザーに対応させる

実際の実装方法はこちらをご覧ください。

Web Font Optimizer

TypeKit で広がる Web デザインの可能性
フォントもクラウドの時代?!あなたのサイトでスタイリッシュなフォントを表示させる『TypeKit』

広告
%d人のブロガーが「いいね」をつけました。