CanvasRenderingContext2D: свойство fontVariantCaps

Свойство CanvasRenderingContext2D.fontVariantCaps API Canvas API определяет альтернативный способ прописного начертания рендеряемого текста.

Это соответствует свойству CSS font-variant-caps.

Значение

Значение альтернативного прописного начертания, которое может быть одним из:

normal (по умолчанию): Деактивирует использование альтернативных глифов.
small-caps: Включает отображение полужирных прописных букв (функция OpenType: smcp). Глифы полужирных прописных букв обычно используют форму прописных букв, но уменьшены до размера строчных букв.
all-small-caps: Включает отображение полужирных прописных букв как для прописных, так и для строчных букв (функции OpenType: c2sc, smcp).
petite-caps: Включает отображение малых прописных букв (функция OpenType: pcap).
all-petite-caps: Включает отображение малых прописных букв как для прописных, так и для строчных букв (функции OpenType: c2pc, pcap).
unicase: Включает отображение комбинации полужирных прописных букв для прописных и обычных строчных букв (функция OpenType: unic).
titling-caps: Включает отображение заголовочных прописных букв (функция OpenType: titl). Глифы прописных букв часто предназначены для использования со строчными буквами. При использовании в последовательностях заголовочных прописных букв они могут казаться слишком сильными. Заголовочные прописные буквы специально разработаны для этой ситуации.

Свойство может использоваться для получения или установки значения прописного начертания шрифта.

Обратите внимание, что некоторые из этих значений могут вызывать проблемы с доступностью, которые описаны в соответствующей font-variant-caps теме.

Примеры

В этом примере отображается текст "Hello World" с использованием каждого из поддерживаемых значений свойства fontVariantCaps. Значение также отображается для каждого случая путем чтения свойства.

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);

Результат

Спецификации

Спецификация
HTML # dom-context-2d-fontvariantcaps

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`fontVariantCaps`	99	99	117	85	Нет	99	117	68	Нет	18.0	99

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/fontVariantCaps