JavaScriptとswfでフォントを美しくする、BJKit
日本語のフォントって、ブラウザで表示させるとギザギザに表示されて、綺麗じゃないんですよねぇ。。。
かといって、画像を毎回作るわけにも行かず。。。
どうしたものかなぁ。。っと悩んでおったところ。。
発見いたしました～！！
BJKit(BeautifulJapaneseKit)
JavaScriptと日本語のフォントを埋め込んだswfを用意することで、動的にアンチエイリアスの効いたフォントに入れ替えてくれます～。
いやぁ～。。待ってました。こんなん。
かなり画期的です。もう、お気づきの方も多いかもしれませんが。。。
試しに、このブログでも導入してみました。。
どうせなら、全部のフォントに適用して、きれいきれいなブログにしようと思っておったのでございますが。。。
とにかく、重い！。。swfファイルが重い！英語だけなら、アルファベットだけで済むので、かなり使える方法なのですが。。。
数千文字ある日本語のフォントを丸々埋め込むので、まだまだ、実用レベルではないのです。。。
でもでも、タイトル部分くらいなら、なんとか、いけるかなぁ～っと。。。
まぁ、とりあえず、肝心の導入方法をご紹介じゃ！
1. BJKit(BeautifulJapaneseKit)をダウンロード
BJKit(BeautifulJapaneseKit)
のサイトから、zipファイルをダウンロードして、解凍する。解凍したファイルをサーバにアップロード。
2. ↓のコードをhtmlの<head>から</head>の間にコピーして、beautifulJapanese.jsを読み込みます。
3. ↓のコードをhtmlの</body>の上にコピーします。
<!–
replaceFonts( ‘beautifu_title‘, ”, ‘/common/swf/fontsData/gothic.swf‘, ‘300‘, ‘36‘, ‘0‘, ‘66‘, ‘000000‘, ‘FFFFFF‘, ‘FF6633‘);
replaceFonts( ‘beautifu_list‘, ‘li‘, ‘/common/swf/fontsData/mincho.swf‘, ‘300‘, ‘22‘, ‘3‘, ‘66‘, ‘000000‘, ‘FFFFFF‘, ‘FF6633‘);
//–>
</script>
↑赤字の部分は、それぞれの設定の値を入力します。
左から、変換対象タグのid、変換対象のタグ名、flashファイルのファイル名、表示領域の幅、フォントのサイズ、行間サイズ、一行あたりに表示する文字数、フォントの色、リンク時のフォントの色、ロールオーバー時のフォントの色をそれぞれ指定します。
そしたら。。。
えらいきれいにフォントが表示されました～。。
もう少し簡単に設定できて、フォントサイズが縮小されるようになったら、かなり使えそうですねぇ。。
|
|
|
January 17th, 2007 at 10:52 am
JavaScriptとswfでフォントを美しくする、BJKit – デザインウォーカー | DesignWalker – ロサンゼルスで働くウェブデザイナーの日記
JavaScriptとswfでフォントを美しくする、BJKit – デザインウォ…