This article contains 3 images. You will find them at the very end of the article.

This article contains 209 words.

WDE08 Blog: Firefoxがwebfontsを実装

Firefoxがwebfontsを実装

• 菊池
• 2008年9月15日
• 4:28 PM
• CSS XHTML コラム ブラウザ

と言ってもリリースはもう少し先のようだ。

だがmozillaの開発メンバーであるJohn DaggetsはMinefieldというWebfontsを使えるバージョンをついに紹介した。いままでデザイナーはユーザーのPCにインストールされているフォントしかウェブサイトで利用することができず見出しに画像を利用したり画像置換を利用して好みのフォントをウェブサイトでは表示してきた。

それをネット上にあるフォントであれば自由に使えるようにし、どのウェブサイトでも同じフォントを表示できれば画像を利用したり画像置換を利用する必要はない。webfontsである。

webfontsの書き方

まずは基本のwebfontsの記述方法である。下記の例はCSS3.infoで紹介されているウェブサイトのソースである。

/* A font by Jos Buivenga (exljbris) -> www.exljbris.nl */ @font-face { font-family: “Fertigo”; src: url(http://www.taptaptap.com/Fertigo.otf) format(”opentype”); }

実際のwebfontsの画像

参考:CSS3.info

http://www.css3.info/font-face-in-the-wild/

Safariのサンプル

Safariはすでwebfontsをかなり前から先行実装している。Safariをインストールしてる方は実際にサンプルをみてみよう。ここではJeffrey ZeldmanのALAの記事にある画像を利用してみる。

まずは実際に表示される画面を画像でみてみよう。

下記のURLをクリックしてほしい。Safariだと上記の画像と同じ画像が表示されるはずだ。

http://www.alistapart.com/d/cssatten/nels.html

Firefoxでwebfontsをつかう

まずはJohn DaggetsがリリースしたMinefieldと呼ばれるFirefoxのtry-outのバージョンをダウンロードしてほしい。(残念ながらLinuxバージョンはまだない。)

次にabout:configとURLボックスに入力してconfig画面を呼び出してほしい。

configの画面のリストからgfx.downloadable_fonts.same-site-origin.enabledをみつけfalseにしてもらいたい。

http://www.alistapart.com/d/cssatten/nels.html



を見るとFirefoxで（Minefield）でもwebfontsをレンダリングすることができる。

webfontsをFirefoxが実装するのは時間の問題だと思う。その他にも著作権の問題や日本語の場合はfontの読み込みに少し時間がかかるなど壁はまだある。ただ、少しづつwebfontsをはじめCSS3は近づいてきている。CSS3は5年も先と考えてるのは日本だけである。今のうちからCSS3に目をむけてインスピレーションを磨くことを忘れないようするべきだろう。

引用元：



A List Apart:

CSS @ Ten: The Next Big Thing

by Håkon Wium Lie

http://www.alistapart.com/articles/cssatten



Thanks !! Jeffrey Zeldman