如何在HTML Canvas绘图时指定字体特性，启用表格数字？

要在Canvas的fillText()中启用表格数字，你需要直接在Canvas 2D上下文上设置字体特性——因为Canvas的文本渲染逻辑独立于CSS，@font-face里的设置不会作用到Canvas绘图。具体有两种实现方式：

方法1：使用fontVariantNumeric属性 #

这个属性和CSS的font-variant-numeric对应，直接设置为tabular-nums即可：

const canvas = document.getElementById('your-canvas');
const ctx = canvas.getContext('2d');

// 设置字体和表格数字特性
ctx.font = '16px YourFontName';
ctx.fontVariantNumeric = 'tabular-nums';

// 绘制带表格数字的文本
ctx.fillText('$123.45', 10, 30);
ctx.fillText('$67.89', 10, 50);
ctx.fillText('$1.23', 10, 70);

方法2：使用fontFeatureSettings属性 #

这是更底层的方式，和CSS的font-feature-settings对应，手动开启tnum特性：

const canvas = document.getElementById('your-canvas');
const ctx = canvas.getContext('2d');

ctx.font = '16px YourFontName';
ctx.fontFeatureSettings = '"tnum" on';

ctx.fillText('$123.45', 10, 30);
ctx.fillText('$67.89', 10, 50);
ctx.fillText('$1.23', 10, 70);

注意：确保你使用的字体确实支持表格数字特性，否则这两个设置不会生效。

内容的提问来源于stack exchange，提问作者blerontin