Optical Kerning jQuery Plugin
npm install optical-kerninghtml
`
$3
`
$ npm install optical-kerning
`
`javascript
require('jquery');
require('optical-kerning');
$('.any-selector-you-want').kerning({
factor: 0.5,
exclude: [[0x00, 0xFF]]
});
`
Notice
$3
When you use web fonts, you need to (re-)apply kerning after downloading fonts. You can use Web Font Loader to get notified when the fonts have been loaded. See the following example.
Webフォントを利用する際には、フォントをダウンロードした後にカーニングを(再)適用する必要があります。フォントがロードされた時に通知を受けるために、Web Font Loaderを利用できます。以下の例をご参照ください。
`javascript
function update() {
$('.kerned').kerning({
exclude: [[0x00, 0xFF]]
});
}
WebFont.load({
custom: {
families: [ 'Mplus 1p:n4', 'Noto Sans Japanese:n4', 'Sawarabi Mincho:n4' ]
},
fontactive: function(familyName, fvd) {
update();
}
});
`
$3
Many of Latin fonts have ligatures, custom shapes for specific letter sequences such as "fi". If your font has a ligature, applying this plugin would break the ligature apart making the text ugly. For that reason, it is recommended not to apply this plugin on Latin characters as shown in above usage with exclude option.
多くの欧文フォントはリガチャ、すなわち "fi" のような特定の文字列に対する特別な字形を持っています。もしフォントがリガチャを持っていた場合、このプラグインを適用するとリガチャが分断され、テキストが醜くなってしまいます。そのため、上記使用法の exclude オプションで示したように、このプラグインは欧文には適用しないことをお勧めします。
$3
OpenType fonts can have proportional widths and kerning metrics, which can be enabled with CSS property as follows. However, this plugin doesn't take these property into account. Avoid enabling these features on the element you're applying this plugin on.
OpenTypeフォントは、プロポーショナル幅やカーニングメトリクスを持つことができ、以下のCSSプロパティで有効にできます。しかしながら、このプラグインはこれらのプロパティを考慮しません。このプラグインを適用する要素でこれらの機能を有効にするのは避けてください。
`css
{
font-feature-settings : "pwid" 1, "kern" 1;
}
`
Reference
$3
Applies optical kerning on every descendant of the given jQuery object.
与えられたjQueryオブジェクトの全ての子孫にオプティカルカーニングを適用します。
`javascript
kerning({options});
``