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 |
浏览器兼容性
加载中…