jump to navigation

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

Posted by hyhy in 技術情報.
Tags:
comments closed

「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』

[ブックマーク] ブログテンプレート、素材、フリーフォント 7月 18, 2009

Posted by hyhy in ART DESIGN MOVIE, WEBデザイン, 技術情報.
Tags: , ,
comments closed

を配布しているサイトをまとめる。

※随時更新

■素材
商用サイトでも無料の国内外のWeb制作に使える素材サイト
WEBのモックデザインを作る時、便利な素材集「A Collection of Useful Web Design Wireframing Resources」
『All in one web elements kit』
ハイクオリティなWeb素材ばかりをフリーで提供するArs Grafik

■FONT
フリーフォントをDL出来るサイトいくつか
13,000種類のフォントからお目当てのフォントが探しやすい「searchfreefonts.com」
http://www.searchfreefonts.com/
Acid Fonts
ALT-DESIGN
FLOP DESIGN
無料のフリーフォントをダウンロードすることができるサイト厳選24個まとめ
2009年を代表するフリーフォントを集めた「The Best Free Fonts of 2009」
フリーのストックフォトが見つかる15サイト

レトロなフリーフォント20選
商用でも無料で使えるクールなゴシック体
最近公開されたばかりのデザインに使える新しいフリーフォント23個まとめ
ウェブデザイナーにもおすすめ、あまり見かけない新しいフリーフォント20個まとめ
有名なバンドのロゴで使われているフォント集
異なるテイストがそろった無料のゴシックフォントのファミリー -Public Gothic Family
日本語用と英数字用のフォントを使い分けるって記事
WinとMac共通のフォント
FONTロゴ作成サイト
参考サイト
createlogo
様々な物体を合成してカラフルなフォントにした「Keeparty」が素晴らしい

フリーフォントじゃないけど、モリサワフォント、サイトデザイン変わったのかな?