2011年10月12日水曜日

GoogleWebFontsでいい感じを魅せる。

サーバー上で公開されているフォントを利用してサイトを彩ることが出来るWebFont。
Googleでは多数のWebFontが無料で公開されており、ユーザーは任意のFontを利用できます。


タイトルなど、これまで画像で再現していたものをWebFontに置き換えて表現することも出来ます。

使い方はカンタン。

任意のフォントのCSSを読み込みます。
<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
あとは、通常のCSSと利用の方法は一緒、IDやCLASSに充ててあげるだけ。
font-family: 'Ubuntu Condensed', sans-serif;
ためしに↓

<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css'>
<style type="text/css">
.dividclass{
font-size:15pt;
font-family: 'Ubuntu Condensed', sans-serif;
}
</style>

充ててみました。


Generalworks with google web fonts

リンクも反映できますし、テキストであることがわかると思います。 近頃、SEOや検索エンジンからは、<h1>タグなどの背景に画像を充てる手法(-9999px等)があまりよろしくない、ということも聞きます。そんな時、環境に依存しないWebFontで代用する、というのもありかもしれません。

0 件のコメント:

コメントを投稿