[JS]日本語のどんなWebフォントでも美しくカーニングできるスクリプト -jQuery.Kerning.js

Post on:2014年3月7日

sponsors

ウェブページで日本語のWebフォントを使用する時にカーニングを適用して、読みやすくて美しく表示するjQueryのプラグインを紹介します。

全角の括弧や句読点などの約物は、日本語のどんなフォントでもスクリプトのみで美しくカーニングできます。
※文字間のカーニングは、フォントごとに設定が必要です。

jQuery.Kerning.jsのデモ

デモでは上：カーニング無し、下：カーニング有りの状態で、明朝とゴシックの2書体がチェックできます。
適用されている方が、読みやすいですね。

明朝体のデモ、上：カーニング無し、下：カーニング有り

ゴシック体のデモ、上：カーニング無し、下：カーニング有り

jquery.jsと当スクリプトを外部ファイルとしてhead内に記述します。

<script src="jquery.js"></script>
<script src="jquery.kerning.min.js"></script>

HTMLは通常通りのマークアップでOK。

<h1>ポラーノの広場</h1>
<p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。</p>

カーニングする箇所をjQueryのセレクタで指定し、スクリプトを実行します。

<script>
jQuery(function($) {
  $.getJSON("./kerning-data.json" , function(data) {
    $('h1,p').kerning({"data":data});
  });
});
</script>

使用するにはフォントに合わせたカーニングデータが必要で、現在さまざまなフォントで利用できるよう自動的にデータを生成するツールを開発中とのことです。

カーニングデータがない場合は、全角約物のカーニングのみが適用されます。これだけでも印象が全然変わりますね。

フォントデータが無い場合のデモ、上：カーニング無し、下：カーニング有り