DesignWalker » BJKit http://www.designwalker.com ロサンゼルスで働くウェブデザイナーの日記。 Wed, 29 Jun 2011 06:24:51 +0000 ja hourly 1 http://wordpress.org/?v=3.0 JavaScriptとswfでフォントを美しくする、BJKit http://www.designwalker.com/2007/01/bjkit.html http://www.designwalker.com/2007/01/bjkit.html#comments Tue, 16 Jan 2007 19:16:18 +0000 admin http://new.designwalker.com/2007/01/javascript%e3%81%a8swf%e3%81%a7%e3%83%95%e3%82%a9%e3%83%b3%e3%83%88%e3%82%92%e7%be%8e%e3%81%97%e3%81%8f%e3%81%99%e3%82%8b%e3%80%81bjkit.html


日本語のフォントって、ブラウザで表示させるとギザギザに表示されて、綺麗じゃないんですよねぇ。。。

かといって、画像を毎回作るわけにも行かず。。。

どうしたものかなぁ。。っと悩んでおったところ。。
発見いたしました～！！

BJKit(BeautifulJapaneseKit)
JavaScriptと日本語のフォントを埋め込んだswfを用意することで、動的にアンチエイリアスの効いたフォントに入れ替えてくれます～。

いやぁ～。。待ってました。こんなん。
かなり画期的です。もう、お気づきの方も多いかもしれませんが。。。

試しに、このブログでも導入してみました。。

どうせなら、全部のフォントに適用して、きれいきれいなブログにしようと思っておったのでございますが。。。

とにかく、重い！。。swfファイルが重い！英語だけなら、アルファベットだけで済むので、かなり使える方法なのですが。。。

数千文字ある日本語のフォントを丸々埋め込むので、まだまだ、実用レベルではないのです。。。
でもでも、タイトル部分くらいなら、なんとか、いけるかなぁ～っと。。。

まぁ、とりあえず、肝心の導入方法をご紹介じゃ！

1. BJKit(BeautifulJapaneseKit)をダウンロード
BJKit(BeautifulJapaneseKit)
のサイトから、zipファイルをダウンロードして、解凍する。解凍したファイルをサーバにアップロード。

2. ↓のコードをhtmlの<head>から</head>の間にコピーして、beautifulJapanese.jsを読み込みます。

<script type=”text/javascript” src=”/common/js/beautifulJapanese.js”></script>

3. ↓のコードをhtmlの</body>の上にコピーします。

<script type=”text/javascript”>
<!–
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ファイルのファイル名、表示領域の幅、フォントのサイズ、行間サイズ、一行あたりに表示する文字数、フォントの色、リンク時のフォントの色、ロールオーバー時のフォントの色をそれぞれ指定します。

そしたら。。。

えらいきれいにフォントが表示されました～。。

もう少し簡単に設定できて、フォントサイズが縮小されるようになったら、かなり使えそうですねぇ。。


]]> http://www.designwalker.com/2007/01/bjkit.html/feed 0