[ Leksykon ] [ JavaScript ] [ Metody ] [ Właściwości ] [ canvas ] [ CanvasRenderingContext2D ]

CanvasRenderingContext2D.fontVariantCaps

[_] [A] [B] [C] [D] [E] [F] [G] [H] [I] [J] [K] [L] [M] [N] [O] [P] [Q] [R] [S] [T] [U] [V] [W] [X] [Y] [Z]

Przykłady:

// html
<canvas id="canvas" width="400" height="300"></canvas>

// javascript, uzyskać odwołanie do elementu canvas, CanvasRenderingContext2D korzystając z canvas właściwości
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

ctx.font = "18px serif";

// Default (normal)
ctx.fillText(`Witaj! (default: ${ctx.fontVariantCaps})`, 3, 18);

// Capitalization: small-caps
ctx.fontVariantCaps = "small-caps";
ctx.fillText(`Witaj! (${ctx.fontVariantCaps})`, 3, 48);

// Capitalization: all-small-caps
ctx.fontVariantCaps = "all-small-caps";
ctx.fillText(`Witaj! (${ctx.fontVariantCaps})`, 3, 68);

// Capitalization: petite-caps
ctx.fontVariantCaps = "petite-caps";
ctx.fillText(`Witaj! (${ctx.fontVariantCaps})`, 3, 88);

// Capitalization: all-petite-caps
ctx.fontVariantCaps = "all-petite-caps";
ctx.fillText(`Witaj! (${ctx.fontVariantCaps})`, 3, 108);

// Capitalization: unicase
ctx.fontVariantCaps = "unicase";
ctx.fillText(`Witaj! (${ctx.fontVariantCaps})`, 3, 148);

// Capitalization: titling-caps
ctx.fontVariantCaps = "titling-caps";
ctx.fillText(`Witaj! (${ctx.fontVariantCaps})`, 3, 168);

Opis:
Właściwość CanvasRenderingContext2D.fontVariantCaps określa alternatywną wielkość liter w renderowanym tekście. Odpowiada to font-variant-caps właściwości CSS. Wartość alternatywnej wielkości liter czcionki, która jest jedną z:

normal (domyślny) - Dezaktywuje użycie alternatywnych glifów.
small-caps - Umożliwia wyświetlanie małych liter funkcja OpenType: smcp. Glify pisane małymi literami zazwyczaj mają formę wielkich liter, ale są zmniejszone do rozmiaru małych liter.
all-small-caps - Umożliwia wyświetlanie małych i wielkich liter zarówno dla dużych, jak i małych liter funkcje OpenType: c2sc, smcp.
petite-caps - Umożliwia wyświetlanie małych liter funkcja OpenType: pcap.
all-petite-caps - Umożliwia wyświetlanie małych i wielkich liter zarówno dla dużych, jak i małych liter funkcje OpenType: c2pc, pcap.
unicase - Umożliwia wyświetlanie kombinacji małych i wielkich liter ze zwykłymi małymi literami funkcja OpenType: unic.
titling-caps - Umożliwia wyświetlanie wielkich liter tytułów funkcja OpenType: titl. Glify zawierające wielkie litery są często zaprojektowane do stosowania z małymi literami. Używane we wszystkich sekwencjach tytułów wielkich liter mogą wydawać się zbyt mocne. Wielkie litery zostały zaprojektowane specjalnie na tę sytuację.

Właściwość może służyć do pobierania lub ustawiania wartości wielkich liter czcionki. Należy pamiętać, że w przypadku niektórych z nich występują problemy z dostępnością, które opisano w odpowiednim font-variant-caps CSS.

Zobacz też: