在绘制HTML画布时如何指定字体功能?

Question

我在HTML页面上使用的字体支持表格图形，这对于漂亮地显示货币数字行非常有用。它们可以在CSS中通过以下方式激活:

.table {
font-variant-numeric: tabular-nums;
}

或更低级的方式:

.table {
font-feature-settings: "tnum" on;
}

但是我如何激活表格图形时，使用CanvasRenderingContext2D.fillText()方法在JavaScript画布对象上绘制?我试着把font-feature-settings线在@font-faceCSS块中定义要加载的字体，但这只影响HTML内的渲染，而不是画布绘图。

Answer 1

我认为它只是不支持，但很高兴被证明是错误的。

作为一种解决方法，您可以使用measureText()来找到最宽的数字的宽度，并逐个呈现数字，使用最宽的数字的宽度作为步长。

或者，如果你的设计允许，你可以选择一种不同的字体，其所有的数字都有相同的宽度开始。这是一个相当常见的默认值。

Answer 2

在字体有等宽字体的情况下，可以使用的一个解决方案是使用只覆盖数字字符的等宽字体变体定义一个单独的字体，并使用正常字体作为后备。这样，浏览器将以相同的宽度呈现所有数字，但标点符号或货币符号使用(可能更好)的默认字体，而无需手动切换字符。

CSS:

@font-face {
font-family: "SomeDefault";
/* ... points to regular font variant ... */
}
@font-face {
font-family: "SomeNumbers";
/* ... points to monospaced font variant ... */
unicode-range: U+0030-0039;
}

JavaScript:

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
/* TODO: Make sure the fonts are already loaded, either by referencing them in HTML or by using the FontFace API */
ctx.font = '20px SomeNumbers, SomeDefault, sans-serif';
ctx.fillStyle = '#444';
ctx.fillText('Text with numbers: 1.234$', 10, 40);