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

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

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

サイトのキャプチャ

jQuery.Kerning.js
jQuery.Kerning.js -GitHub

jQuery.Kerning.jsのデモ

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

デモのキャプチャ

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

デモのキャプチャ

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

jQuery.Kerning.jsの使い方

Step 1: 外部ファイル

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

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

Step 2: HTML

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

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

Step 3: JavaScript

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

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

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

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

デモのキャプチャ

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

top of page

©2017 coliss