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 |
浏览器兼容性
BCD 表格仅在浏览器中加载