CanvasRenderingContext2D:fontKerning 屬性

可用性有限

此特性不是基線特性,因為它在一些最廣泛使用的瀏覽器中不起作用。

CanvasRenderingContext2D.fontKerning 屬性,屬於 Canvas API,用於指定如何使用字型字偶間距資訊。

字偶間距(Kerning)會調整比例字型中相鄰字母的間距,允許它們在有可用空間時互相“侵入”彼此的視覺區域。例如,在字偶間距良好的字型中,字元 AVTaWe 會互相巢狀,使字元間距比沒有字偶間距的等效文字更均勻、更悅目。

此屬性對應於 font-kerning CSS 屬性。

此屬性可用於獲取或設定其值。

允許的值為:

auto

瀏覽器確定是否應使用字偶間距。例如,某些瀏覽器會在小字型上停用字偶間距,因為應用字偶間距可能會損害文字的可讀性。

normal

必須應用字型中儲存的字偶間距資訊。

none

停用字型中儲存的字偶間距資訊。

示例

在此示例中,我們使用 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

瀏覽器相容性