CanvasRenderingContext2D: fontKerning-Eigenschaft
Die CanvasRenderingContext2D.fontKerning-Eigenschaft der Canvas-API legt fest, wie Schrift-Kerning-Informationen verwendet werden.
Kerning passt den Abstand zwischen benachbarten Buchstaben in einer Proportionalschriftart an, sodass sie in den visuellen Bereich des anderen überlappen können, wenn Platz verfügbar ist. Bei gut durchgekernten Schriftarten verschmelzen beispielsweise die Zeichen AV, Ta und We miteinander und machen den Zeichenabstand einheitlicher und angenehmer zu lesen als der entsprechende Text ohne Kerning.
Die Eigenschaft entspricht der font-kerning CSS-Eigenschaft.
Wert
Die Eigenschaft kann verwendet werden, um den Wert zu erhalten oder festzulegen.
Erlaubte Werte sind:
auto-
Der Browser bestimmt, ob Schrift-Kerning verwendet werden soll oder nicht. Zum Beispiel deaktivieren einige Browser das Kerning bei kleinen Schriftarten, da die Lesbarkeit des Textes beeinträchtigt werden könnte.
normal-
Schrift-Kerning-Informationen, die in der Schrift gespeichert sind, müssen angewendet werden.
none-
Schrift-Kerning-Informationen, die in der Schrift gespeichert sind, werden deaktiviert.
Beispiele
In diesem Beispiel wird der Text "AVA Ta We" unter Verwendung jedes der unterstützten Werte der textRendering-Eigenschaft angezeigt.
HTML
<canvas id="canvas" width="700" height="140"></canvas>
JavaScript
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);
Ergebnis
Beachten Sie, dass bei der letzten Zeichenfolge das Schrift-Kerning deaktiviert ist, sodass benachbarte Zeichen gleichmäßig verteilt sind.
Spezifikationen
| Specification |
|---|
| HTML Standard # dom-context-2d-fontkerning |
Browser-Kompatibilität
BCD tables only load in the browser