JavaScriptとswfでフォントを美しくする、BJKit


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

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

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

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

そしたら。。。

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

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

デザインblogランキングデザインblogランキング

デザインblogランキング

コメント No Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



No Responses to “JavaScriptとswfでフォントを美しくする、BJKit”

  1. SITE159 Says:

    JavaScriptとswfでフォントを美しくする、BJKit – デザインウォーカー | DesignWalker – ロサンゼルスで働くウェブデザイナーの日記

    JavaScriptとswfでフォントを美しくする、BJKit – デザインウォ…

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ