CanvasRenderingContext2D:fontKerning 屬性
CanvasRenderingContext2D.fontKerning 屬性,屬於 Canvas API,用於指定如何使用字型字偶間距資訊。
字偶間距(Kerning)會調整比例字型中相鄰字母的間距,允許它們在有可用空間時互相“侵入”彼此的視覺區域。例如,在字偶間距良好的字型中,字元 AV、Ta 和 We 會互相巢狀,使字元間距比沒有字偶間距的等效文字更均勻、更悅目。
此屬性對應於 font-kerning CSS 屬性。
值
此屬性可用於獲取或設定其值。
允許的值為:
示例
在此示例中,我們使用 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 (default: ${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);
結果
請注意,最後一個字串停用了字偶間距,因此相鄰字元是均勻分佈的。
規範
| 規範 |
|---|
| HTML # dom-context-2d-fontkerning |
瀏覽器相容性
載入中…