Webページのテキストを好きな書体で表現できるJavaScript、Cufónを試してみました。
DEMO
通常、Webデザインでタイポグラフィを表現しようと思えば、CSSのfont-familyプロパティで指定するか、画像で文字を作ります。しかし、font-familyプロパティはWebページが表示されるパソコンに指定したフォントがインストールされている必要があり、画像で文字を作るのもあまりスマートなやり方ではありません。
CufonはHTMLのテキストを好きな書体で表示させることができる仕組みです。
フォントファイルをJavaScriptファイルに変換し、そのJavaScriptファイルでテキストを置き換えます。
同じような仕組みでsIFRというのがあり、こちらはFlashのswfファイルに置き換える方法です。
残念ながら日本語フォントは文字の種類が多すぎるので使えません。
数字と記号を合わせても100文字前後でおさまるLatin文字だからこそ可能な方法です。
以下に利用手順を説明します。
Cufonファイルを入手
まずCufónファイル（cufon-yui.js）を入手します。
フォントファイルをJavaScriptに変換
次に使用したいフォントファイルを用意し、Font GeneratorサイトでJavaScriptファイルに変換します。
利用できるフォント形式はTrueType (TTF)、OpenType (OTF)、Printer Font Binary (PFB) 、 PostScriptです。
- 一番上の「Regular Typeface」というフィールドで変換するフォントファイルを選択
- 「The EULAs of these fonts allow Web Embedding (without Adobe Flash)」というチェックボックスをチェック
- 「Include the following glyphs (if available)」欄の「Basic Latin」にチェック
- 一番下の「I acknowledge and accept these terms」にチェック
- 「Let’s do this!」を押す
これで変換されたJavaScriptファイルがローカルの任意の場所に保存されます。
（細かいオプション設定はお好みで。）
HTMLファイルの記述
Cufonファイル、フォントファイルがそろったところで、HTMLの記述をします。
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Fertigo_Pro_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('h1');
</script>
<script type="text/javascript">
Cufon.now();
</script>
「Fertigo_Pro_400.font.js」という箇所は使用するフォントのファイル名に置き換えてください。
上の例では、h1タグにフォントを適用しています。
Cufon.now();というのはIEで動作させるために必要な記述です。ページの一番最後、bodyタグを閉じる前に記述しますが、Google Analyticsなどの外部スクリプトよりは前に記述してください。
Cufonだけではタグ名でしか変更する箇所を指定できませんが、jQueryやPrototypeなどのJavaScriptライブラリと併用することで、自由に指定することができます。
jQueryでセレクタを使う
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Fertigo_Pro_400.font.js"></script>
<script type="text/javascript">
$(document).ready(function() {
Cufon.replace($('h1.cufon'));
Cufon.now();
});
</script>
２種類以上のフォントを使用する場合
２種類以上のフォントを使用する場合は以下のようにします。
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Fertigo_Pro_400.font.js"></script>
<script type="text/javascript">
Cufon.replace('h2', {
fontFamily: 'Fertigo Pro'
});
Cufon.replace($('p.cufon'), {
fontFamily: 'PicoBlackAl'
});
Cufon.now();
</script>
Anchorタグのホバリング
Cufonが適用されたAnchorタグ（Aタグ）にホバリング（オンマウス）の動作を加えたい場合は以下のような記述が必要になります。
Cufon.replace('h2', {
fontFamily: 'Fertigo Pro',
hover: true,
hoverables: { a: true }
});
とりあえず完成
これでひとまず完成です。
DEMO（仮）
@font-face規則との併用
Safari4やFirefox3.5ではCSSの@font-face規則により独自のフォントで表示することが可能です。Cufonを使うよりも@font-faceが使えるブラウザではそちらを優先させた方がスマートです。
- 指定したフォントが使える場合は、@font-faceやfont-familyプロパティを優先
- 指定したフォントが使えない場合は、Cufonで置き換え
という方法をとります。
表示しているブラウザで指定したフォントが使用可能かどうかを調べるためにRemy Sharpさんが作ったfont.jsを利用しました。
（Kilian ValkhofさんのサイトではfontAvailable.jsを使用していますが、どうにも@font-faceで指定したフォントがうまく認識されませんでした。）
完成
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/font.js"></script>
<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/PicoBlackAl_800.font.js"></script>
<script type="text/javascript" src="js/Fertigo_Pro_400.font.js"></script>
<script type="text/javascript">
$(document).ready(function() {
font.setup(); // run setup when the DOM is ready
if(!font.isInstalled('Fertigo Pro')) {
Cufon.replace('h2', {
fontFamily: 'Fertigo Pro',
hover: true,
hoverables: { a: true }
});
}
if(!font.isInstalled('PicoBlackAl')) {
Cufon.replace($('p.cufon'), {
fontFamily: 'PicoBlackAl'
});
}
});
</script>
<script type="text/javascript"> Cufon.now(); </script>
スタイルシート
スタイルシートには@font-face、font-familyを記述します。
@font-face {
font-family: "Fertigo Pro";
src: url(Fertigo_PRO.otf) format("opentype");
}
@font-face {
font-family: "PicoBlackAl";
src: url(Pico-BlackAl.ttf) format("truetype");
}
h2{
font-family: "Fertigo Pro", sans-serif;
}
p.cufon{
font-family: "PicoBlackAl", sans-serif;
}
Cufonの問題点
- 日本語が使えない。
- マウスカーソル等で文字が選択できない。
- 著作権の問題からフリーフォントでのみ利用可能。
このデモでは、Fertigo PROとPicoというフリーフォントを使用しました。
@font-faceが手軽で扱いやすく一番よいのですが、各ブラウザが対応するにはもう少し時間がかかりそうです。また、フォントファイルをそのまま読み込む仕組みのため、著作権上の問題もあります。しかし、その辺の問題をクリアするTypeKitというプロジェクトが今進められているようです。
今後、@font-faceが広まれば、Webデザインのタイポグラフィがどんどん面白くなりそうな気がします。
One Trackback
[...] 関連参照サイト： Cufonの使い方 WP-Cufon：：：Wordpress [...]