CanvasRenderingContext2D: fontKerning-Eigenschaft
Limited availability
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Die CanvasRenderingContext2D.fontKerning-Eigenschaft der Canvas API gibt an, wie Informationen zum Font-Kerning verwendet werden.
Kerning justiert den Abstand zwischen angrenzenden Buchstaben in einer proportionale Schriftart, sodass sie in den visuellen Bereich des anderen hineinragen können, sofern Platz vorhanden ist. In gut gekernten Schriftarten nesteln sich beispielsweise die Zeichen AV, Ta und We zusammen und machen den Zeichenabstand gleichmäßiger 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 abzurufen oder festzulegen.
Erlaubte Werte sind:
auto-
Der Browser entscheidet, ob Font-Kerning verwendet werden soll oder nicht. Einige Browser deaktivieren beispielsweise das Kerning bei kleinen Schriftarten, da dies die Lesbarkeit des Textes beeinträchtigen könnte.
normal-
Die in der Schrift gespeicherten Kerning-Informationen müssen angewendet werden.
none-
Die in der Schrift gespeicherten Kerning-Informationen werden deaktiviert.
Beispiele
In diesem Beispiel zeigen wir den Text "AVA Ta We" unter Verwendung jedes der unterstützten Werte der textRendering-Eigenschaft.
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 die letzte Zeichenfolge kein Font-Kerning hat, sodass angrenzende Zeichen gleichmäßig verteilt sind.
Spezifikationen
| Specification |
|---|
| HTML # dom-context-2d-fontkerning |
Browser-Kompatibilität
Loading…