Signatur
Beschreibung
Die Eigenschaft fontKerning des 2D-Kontexts steuert das Kerning, also den Abstand zwischen bestimmten Buchstabenpaaren wie „AV“, „To“ oder „Wa“. Die Abstände stehen in den Kerning-Tabellen der Schriftart (zum Beispiel in der OpenType-Funktion kern). Die Eigenschaft wirkt auf fillText(), strokeText() und measureText().
Mögliche Werte:
"auto"(Standard): Der Browser entscheidet selbst, ob Kerning angewendet wird. Meist hängt das von der Schriftgröße und der Plattform ab."normal": Die Kerning-Informationen der Schriftart werden immer angewendet."none": Kein Kerning, alle Zeichen stehen im Standardabstand.
Die Eigenschaft entspricht der CSS-Eigenschaft font-kerning. Sie ist nützlich, wenn Text auf dem Canvas genauso aussehen soll wie im DOM, wenn Logos oder Überschriften typografisch sauber gesetzt werden sollen oder wenn Texte auf allen Plattformen gleich breit sein müssen. Mit "none" ist die Textbreite leichter vorhersagbar, etwa bei Pixel-Schriften oder beim zeichenweisen Positionieren.
Wie alle Text-Eigenschaften gehört fontKerning zum Zeichenzustand. Sie wird also von save() gesichert, von restore() wiederhergestellt und von reset() auf "auto" zurückgesetzt.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $wert | "auto" | "normal" | "none" | "auto" | Neuer Kerning-Modus beim Setzen der Eigenschaft. Ungültige Werte werden stillschweigend ignoriert, der bisherige Wert bleibt erhalten. |
Rückgabewert
"auto", "normal" oder "none".Beispiele
Kerning-Modi im Vergleich
const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
ctx.font = '48px Georgia, serif';
const modi = ['auto', 'normal', 'none'];
modi.forEach((modus, i) => {
ctx.fontKerning = modus;
ctx.fillText(`AVATAR Wa To (${modus})`, 10, 60 + i * 60);
});Auswirkung auf die gemessene Textbreite
const ctx = document.createElement('canvas').getContext('2d');
ctx.font = '40px Arial';
const text = 'AVAWAY Tokyo';
ctx.fontKerning = 'normal';
const mitKerning = ctx.measureText(text).width;
ctx.fontKerning = 'none';
const ohneKerning = ctx.measureText(text).width;
console.log(`mit Kerning: ${mitKerning.toFixed(1)}px`);
console.log(`ohne Kerning: ${ohneKerning.toFixed(1)}px`);
console.log(`Differenz: ${(ohneKerning - mitKerning).toFixed(1)}px`);Feature-Erkennung und Zustand mit save()/restore()
const ctx = document.querySelector('canvas').getContext('2d');
if ('fontKerning' in ctx) {
ctx.font = 'bold 32px system-ui';
ctx.save();
ctx.fontKerning = 'none'; // nur für diesen Block
ctx.fillText('LOGO TYPE', 20, 50);
ctx.restore();
console.log(ctx.fontKerning); // wieder der Standardwert
} else {
console.warn('fontKerning wird nicht unterstützt');
}
ctx.fontKerning = 'fett'; // ungültig, wird ignoriert
console.log(ctx.fontKerning);// Wichtig · Fallstricke
- Browser-Unterstützung: Erst seit 2022/2023 in allen großen Browsern verfügbar (Chrome/Edge 99, Safari 15.4, Firefox 104). In älteren Browsern ist die Eigenschaft
undefined, das Setzen hat dann keine Wirkung. Prüfen lässt sich die Unterstützung mit'fontKerning' in ctx. - Die Schriftart muss Kerning-Daten enthalten: Fehlen Kerning-Tabellen, sehen
"normal"und"none"gleich aus. Auch nicht-proportionale Schriften (Monospace) werden in der Regel nicht unterschnitten. - Uneinheitliches
"auto": Die Browser handhaben"auto"unterschiedlich, manche deaktivieren Kerning bei kleinen Schriftgrößen. Wenn der Text auf allen Plattformen gleich aussehen soll, setze den Wert ausdrücklich auf"normal"oder"none". - Ungültige Werte (auch Großschreibung wie
"Normal") lösen keinen Fehler aus. Sie werden einfach ignoriert. - Der Wert
"none"schaltet nur das Kerning ab, nicht Ligaturen oder andere OpenType-Funktionen. Für Zeichenabstände gibt esletterSpacing, für Ligaturen gibt es keine eigene Canvas-Eigenschaft. - Die Eigenschaft ist auch in
OffscreenCanvasRenderingContext2Dverfügbar, also auch in Web Workern.