+RECOMMEND
+RECOMMEND
+Ad
+OTHERS

無料ブログ作成サービス JUGEM

paperboy&co.
RSS 1.0
ATOM  0.3
<< December 2018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 >>
<< iPad予約開始 そして電子書籍の動きは? | main | 解像度別にブラウザの表示範囲を確認できるサイト2 >>
CSS3 使えるWebフォントサービス

Webフォントサービス

CSS3で「@font-face」という機能が追加されています。
この機能は、今までローカル環境に依存してきたフォントファミリーの指定を、Webサーバー上にアップロードしたフォントを直接読みに行くことで、ユーザー環境に依存することなくデザイナーの意図したフォントを使用できるようになるという機能です。
従来のような、お決まりのフォントから開放されると言う画期的なメリットがある反面、これまでローカル環境での使用に限定されてきたフォントがWebサーバー上で公開することを許可しているフォントがすくなく、まだまだ現実的に使用しづらい面がありました。
そこを解決してくれそうなサービスが、今回ご紹介するサービスです。


白石 俊平
日経BP社
¥ 2,940
(2010-02-25)

 

■webfonts.font.com

http://webfonts.fonts.com/

数あるWebFont提供サイトの中でも、有名な書体を使用できるサービスです。
アカウント登録して、使用したいサイトとフォントを選んで、生成されたjavascriptを自分のサイトに設置するだけでOKです。

1:アカウントを取得したらログインします。
ログインしたら、プロジェクトを設定します。


2:フォントを選びます。


3:フォントを選んだら、フォントを指定したいクラスやID、タグを指定します。


たとえば「 #font 」や「 .topics 」や単純に 「 h1 」「 h2 」といった感じです。


”Selectors”というところに指定します。入力したら、Add selectorをクリック。

4:指定が終わると、あとはjavascriptの埋め込み用ソースを、サイトに埋め込んでください。
埋め込むのは<body>直下に埋め込む必要があるみたいです。

ためしに埋め込みしてみたので、リンクを張っておきます。
Sample

下記の検証環境では、問題なくフォントが指定されていました。
ただし、Windows2000やxpはアンチエイリアスが聞かないので、表示にがたつきが出てしまうのが少し残念です。
OS Win2000 WinXP SP3 Win7
IE ○(IE ver6) ○(IE8) ○(IE8)
FireFox
Chrome --
Opera
Safari --

じつはこのサイト少ないですが、日本語フォントも提供していますので、是非活用してみてください。
ただ、今のところΒテストとのことなので、将来的に料金発生の可能性は否定できません。


検証は行っていませんが、そのほか有力なWebFontサービスを挙げて起きます。

■typekit

http://typekit.com/


こちらも同じように、フォントとセレクタの指定後、ソースを貼り付ける使用になっています。


■デコもじ

http://decomoji.jp/


基本的な使い方は同じですが、こちらは日本語に特化したサイトに名ています。
また、有料プランに登録すると、使用できるサイト数やフォントが増やせるほか「プロフォント」とよばれる高品質なものも使えるようになるそうです。



「@font-face」をサポートできるブラウザが整いつつある段階で、フォントベンダーもまだまだ対応が始まったばかりなので、こういったサービスを利用するのはよいかもしれませんね。
| CSS | 22:30 | comments(0) | trackbacks(0) | - | - |はてなブックマーク - CSS3 使えるWebフォントサービス | このエントリーをはてなブックマークに追加









http://blog.tug.lomo.jp/trackback/990150