あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。
<h1>ポラーノの広場</h1> <p>あのイーハトーヴォのすきとおった風、夏でも底に冷たさをもつ青いそら、うつくしい森で飾られたモーリオ市、郊外のぎらぎらひかる草の波。</p>
$.getJSON("./kerning-data.json" , function(_data) {
$('h1,p').kerning({data:_data});
});
使用するには、フォントに合わせたカーニングデータの作成が必要です。
現時点では、ソースコードに付属しているテンプレートを参考に、使用するフォントに合わせたカーニングデータを別途作成する必要があります。
※ フォントデータから自動的にjsonデータを生成するツールを試作中です。
カーニングデータを指定しなかった場合、デフォルトで全角約物のカーニングのみ設定されます。
$('p').kerning();
どんなフォントでも「約物（やくもの）」のカーニング調整が、簡単にできます。
どんなフォントでも「約物（やくもの）」のカーニング調整が、簡単にできます。
通常、カーニングデータを指定するとデフォルトのカーニングデータが上書きされ消えてしまいますが、第２引数にtrueを指定することで、デフォルトのカーニング情報に指定したデータをマージして適用することができます。
$('p').kerning({data:_data}, true);
一旦カーニングを適用後に、再度'destroy'オプション付きで呼び出すことで、カーニングをキャンセルし、元の状態に戻すことができます。
$('p').kerning('destroy');
javascriptを書かなくても、data属性だけで記述することもできるようになりました。
<p data-kerning>この要素は、デフォルトのカーニング（全角約物のカーニング）が適用されます。</p>
<p data-kerning="{data:_data}">このように、カーニングデータを指定する事もできます。</p>