CanvasRenderingContext2D: fontVariantCaps-Eigenschaft
Die CanvasRenderingContext2D.fontVariantCaps
-Eigenschaft der Canvas API gibt eine alternative Kapitalkapitalisierung des gerenderten Textes an.
Dies entspricht der CSS-Eigenschaft font-variant-caps
.
Wert
Der alternative Kapitalkapitalisierungswert der Schrift, einer der folgenden:
normal
(Standard)-
Deaktiviert die Verwendung alternativer Glyphen.
small-caps
-
Ermöglicht die Darstellung von Kapitälchen (OpenType-Funktion:
smcp
). Kapitälchen-Glyphen verwenden typischerweise die Form von Großbuchstaben, sind jedoch auf die Größe von Kleinbuchstaben reduziert. all-small-caps
-
Ermöglicht die Darstellung von Kapitälchen sowohl für Groß- als auch für Kleinbuchstaben (OpenType-Funktionen:
c2sc
,smcp
). petite-caps
-
Ermöglicht die Darstellung von Petit-Großbuchstaben (OpenType-Funktion:
pcap
). all-petite-caps
-
Ermöglicht die Darstellung von Petit-Großbuchstaben sowohl für Groß- als auch für Kleinbuchstaben (OpenType-Funktionen:
c2pc
,pcap
). unicase
-
Ermöglicht die Darstellung einer Mischung aus Kapitälchen für Großbuchstaben mit normalen Kleinbuchstaben (OpenType-Funktion:
unic
). titling-caps
-
Ermöglicht die Darstellung von Titelkapitälchen (OpenType-Funktion:
titl
). Großbuchstabenglyphen sind oft für die Verwendung mit Kleinbuchstaben ausgelegt. Wenn sie in vollständig großgeschriebenen Titelzeilen verwendet werden, können sie zu stark wirken. Titelkapitälchen sind speziell für diese Situation konzipiert.
Die Eigenschaft kann verwendet werden, um den Kapitalkapitalisierungswert der Schrift abzurufen oder festzulegen.
Beachten Sie, dass es bei einigen dieser Varianten Barrierefreiheitsbedenken gibt, die im entsprechenden Thema font-variant-caps
beschrieben sind.
Beispiele
In diesem Beispiel zeigen wir den Text „Hello World“ unter Verwendung jedes der unterstützten Werte der fontVariantCaps
-Eigenschaft an.
Der Wert wird auch in jedem Fall angezeigt, indem die Eigenschaft gelesen wird.
HTML
<canvas id="canvas" width="700" height="220"></canvas>
JavaScript
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.font = "20px serif";
// Default (normal)
ctx.fillText(`Hello world (default: ${ctx.fontVariantCaps})`, 5, 20);
// Capitalization: small-caps
ctx.fontVariantCaps = "small-caps";
ctx.fillText(`Hello world (${ctx.fontVariantCaps})`, 5, 50);
// Capitalization: all-small-caps
ctx.fontVariantCaps = "all-small-caps";
ctx.fillText(`Hello world (${ctx.fontVariantCaps})`, 5, 80);
// Capitalization: petite-caps
ctx.fontVariantCaps = "petite-caps";
ctx.fillText(`Hello world (${ctx.fontVariantCaps})`, 5, 110);
// Capitalization: all-petite-caps
ctx.fontVariantCaps = "all-petite-caps";
ctx.fillText(`Hello world (${ctx.fontVariantCaps})`, 5, 140);
// Capitalization: unicase
ctx.fontVariantCaps = "unicase";
ctx.fillText(`Hello world (${ctx.fontVariantCaps})`, 5, 170);
// Capitalization: titling-caps
ctx.fontVariantCaps = "titling-caps";
ctx.fillText(`Hello world (${ctx.fontVariantCaps})`, 5, 200);
Ergebnis
Spezifikationen
Specification |
---|
HTML Standard # dom-context-2d-fontvariantcaps |
Browser-Kompatibilität
BCD tables only load in the browser