2010年10月01日

Webフォント


Webフォント今回は、Webフォントのお話し。

ブラウザーによっては、うまく表示されない事があるかもしれませんが、▼こんな感じに見えています。


Webフォント


前回はWEB上でフリー・フォントを使って入力した文字を画像にする方法を紹介しましたが、時代はこれからWebフォントに向かっていくようです。

Webフォントとは何かと言うと、WEB上で様々なフォントを利用できるサービス。
自分のWEBサイトで好きなフォントが使えるというもの。
(今回の本文は、この方法で書いています。ちょっと表示が遅いようですね)

僕が利用してみたのは、デコもじというサービス。
会員登録をすると使えるようになります。(無料会員だと1サイト・1フォントまで)

商用サイトで無い、個人ブログなどでは自由に使えるようです。
(ホントは ビジネスブログの「WEB沖縄 in TI-DA」の方で書きたいところですが‥)

導入方法は、デコもじさんの方に詳しく載っていますが、google chrome6では「デコもじエディタ」という導入ツールが使えないようで、少し戸惑いました。(今回はfirefoxを使用)

簡単にやり方を書いておきます。

まずデコもじさんのサイトで会員登録すると、専用のジャバスクリプトが発行されます。
それをコピーして、ブログのHTMLに貼り付けます。
ページ全体に適用するためには、ヘッダー部分に貼り付けるのが良さそうです。
(今回は、この記事の先頭にジャバスクリプトを貼り付けました。これは外からは見えません)

そして、フォントを適用する範囲をCSSで指定。
今回は▼のような文字列を使っています。
<span class="​deco-maru-font">ここに文章を書きます</span>

次にデコもじさんのサイトで「デコもじエディタ」というツールを起動すると、自分のブログが現れます。
文字を変更したい部分。今回は「<span class="​deco-maru-font">ここに文章を書きます</span>」を選択したら、フォントを適用して、文字のサイズを指定。
即座に反映され、自分のサイトの文字が変わるのが確認できます。

あとは設定を保存すればOK!

自分のブログが、この記事のようになります。

面白いですねー!


注:若干、表示が遅くなる気もします。各自でメリットとデメリットを比較して下さいね。





同じカテゴリー(ソフトの紹介・使い方)の記事



※このブログではブログの持ち主が承認した後、コメントが反映される設定です。
上の画像に書かれている文字を入力して下さい
 
<ご注意>
書き込まれた内容は公開され、ブログの持ち主だけが削除できます。

※記事内容に言及無いコメントは、コメントスパムと判断して削除する場合があります。