DN*BLOG

2009.2.5

「@font-face」でウェブフォントを表示

近い将来画像で見出しを作ったりする事がなくなるかもしれないです!?

とは、言い過ぎたかもしれないですけど、それくらい便利な「@font-face」。
使い方は至って簡単です。

CSSソース

@font-face {
	font-family: monof;
	src: url("../monof55.ttf") format("truetype");
}

.fontFace {
	font-family: GTFont;
}

XHTMLソース

<p class="fontFace">abcdefghijklmnopqrstuvwxyz</p>

では、見てみましょう。
Safari3.1でみてください。

abcdefghijklmnopqrstuvwxyz

どうでしょうか?
ちゃんと表示されているでしょうか。

ブラウザの対応が普及されればとても便利になりそうですね。
でも、フォントのライセンスなどで問題がでてくるかも・・・。

ちなみにこの「@font-face」はAdobe MAX 2009でお話を伺いました。
ちょっとSafariが楽しすぎで困ってます・・・。Firefox使いとしてはSafariに同じようなアドオンがあればなー、って思いますね。
おまけですけど、Adobe MAX 2009のセッション資料や講演ストリーミングビデオ閲覧は2月の中旬を予定されているみたいです。
参加された方は2月中旬を待て!!!!!

FavoriteLoadingAdd to favorites

Category : CSS , font , Safari

関連する記事