JavaScriptでWebページのフォントを変更するライブラリ〜cufon

自分でも綺麗なフォントを簡単にWEBページに適用できる方法がないかを調べてみたら、あった。

Cufonについて、まとめてみた。

【Cufonとは】
・フォントファイルをJavaScriptファイル(以下、JSファイルと呼ぶ)に変換し、適用したい箇所にそのフォントを適用できるライブラリ
【使い方】
①フォントファイル(図中のfont)をcufonのサイトでJSファイルに変換する（下図のfont.js）
②cufonのサイトから、フォント適用のためのライブラリをダウンロードする
③font.jsとcufon.jsをhtmlファイルで読みこんで、cufon.jsからfont.jsを呼び出すことでフォントをhtmlファイルに適用する

【メリット】
・CSSのfont-familyに設定をしなくてもよいため、WEBページを読み込むパソコンにフォントファイルがインストールされていなくてもよい
【デメリット】
・日本語対応していない。大きなデメリットです

試しに使ってみました。

<html>
<head>
	<title>cufonの使い方</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
</head>
<body>
<!-- h1タグとh2タグで囲まれた部分にcufonを適用するよ -->
<h1 class="title">Let's use Cufon!</h1><br/>
<h2 class="title">But Impossible to apply for Japanese! 日本語は対応していない。</h2><br/>

<!-- body部分最後にScriptをまとめて定義 -->
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>

<!-- フォントを適用するためのcufonライブラリ -->
<script type="text/javascript" src="lib/cufon-yui.js"></script>

<!-- JSに変換したフォントファイル -->
<script src="ChunkFive_400.font.js" type="text/javascript"></script>

<!-- cufonライブラリを使用して、フォントを適用する-->
<script type="text/javascript">
//h1タグとh2タグで囲まれた部分にcufonを適用するよ
Cufon.replace('h1, h2');
</script>
</body>
<html>

ブラウザで表示した結果は下記。

~~日本語対応してないせいで、「日本語は対応していない。」という日本語は、「B」という期待しない文字に変換されてしまっている。~~「B」という文字に変換されているのは単なる文字化けでした。日本語対応していない事で起こる現象は、文字化けではなく、文字が表示されないことでした。なので、本来この「B」は表示されないのが正しい動作です。

下記ページを参考にしました。
■Cufonの使い方