テキストを好きなフォントで表示できるJavaScript「cufon」

最近多くの英語サイトのソースで見られるJavaScriptにcufon.jsと言うのがあります。
これはJavaScriptを使用して、テキストを好きなフォントで表示できるものです。
Google Font APIが出ましたが、まだまだ数が少ないです。
こだわりのある方は、フォントを選択できるcufo'n - fonts for the peopleを使用するのも良いのではないでしょうか。
※フリーフォントのみで・・
テキストを好きなフォントで表示できるJavaScript「cufon」サンプル

使用方法
cufo'n - fonts for the peopleからcufon.jsをダウンロードします。
また、表示させたいフォントをjs化します。
今回は、1001 Free Fonts - Download Free Fonts for Windows and MacintoshからHawaiiLoverというフォントを使用してみました。
ダウンロードしたファイルを一番上のRegular typefaceに、あとは【The EULAs of these fonts allow Web Embedding】と最後の【I acknowledge and accept these terms】にチェックを入れて、【Let's do this!】でjs化されます。
今回の例ではHawaii_Lover_400.font.jsというファイルができました。
これらをサイトに埋め込んでいきます。
ちなみにjQueryをちょっと使いますので、jQueryからダウンロードしてください。
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="Hawaii_Lover_400.font.js"></script> //できたフォントに応じて変えてください
<script type="text/javascript">
$(document).ready(function() {
Cufon.replace($('h1')); //h1と記述した部分のフォントが変わります
Cufon.now();
});
</script>

複数の要素をしていする場合は、h1,h2というようにしてください。
あとは上記の要素を記述すればフォントが置き換わります。
※日本語不可

テキストを好きなフォントで表示できるJavaScript「cufon」サンプル

sponsors

「テキストを好きなフォントで表示できるJavaScript「cufon」」をシェアする

記事作成:
記事URL:

TOP > > > テキストを好きなフォントで表示できるJavaScript「cufon」