CanvasRenderingContext2D: fontKerning プロパティ
CanvasRenderingContext2D.fontKerning
はキャンバス API のプロパティで、フォントのカーニング情報をどのように使用するかを指定します。
カーニングはプロポーショナルフォントにおいて隣り合う文字の間隔を調整するもので、利用できる空間があれば、文字がお互いの視覚領域に入り込むようにします。
例えば、カーニングが施されたフォントでは、AV
、Ta
、We
の文字が互いに寄り集まり、カーニングのない同等のテキストよりも文字空間が均一で読みやすくなります。
このプロパティは CSS の font-kerning
プロパティに相当します。
値
例
この例では、 textRendering
プロパティに対応しているそれぞれの値を用いて、 "AVA Ta We" というテキストを表示します。
HTML
html
<canvas id="canvas" width="700" height="140"></canvas>
JavaScript
js
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "30px serif";
// Default (auto)
ctx.fillText(`AVA Ta We (既定値: ${ctx.fontKerning})`, 5, 30);
// Font kerning: normal
ctx.fontKerning = "normal";
ctx.fillText(`AVA Ta We (${ctx.fontKerning})`, 5, 70);
// Font kerning: none
ctx.fontKerning = "none";
ctx.fillText(`AVA Ta We (${ctx.fontKerning})`, 5, 110);
結果
最後の文字列はフォントのカーニングが無効になっているため、隣接する文字が均等に広がっていることに注意してください。
仕様書
Specification |
---|
HTML # dom-context-2d-fontkerning |
ブラウザーの互換性
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
fontKerning |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.