CanvasRenderingContext2D: fontVariantCaps 屬性
CanvasRenderingContext2D.fontVariantCaps 屬性是 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 主題中有所概述。
示例
在此示例中，我們使用 fontVariantCaps 屬性支援的每個值來顯示文字“Hello World”。透過讀取該屬性，還顯示了每種情況的值。
HTML
html
<canvas id="canvas" width="700" height="220"></canvas>
JavaScript
js
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 |
瀏覽器相容性
載入中…