javascript - js canvas - 使用特定文本权重计算文本宽度

Question

我目前正在使用以下代码来计算文本宽度:

function measureWordSize(word, font) {
    var canvas = measureWordSize.canvas || (measureWordSize.canvas = document.createElement("canvas"));
    var context = canvas.getContext("2d");
    context.font = font;
    var metrics = context.measureText(word);
    return metrics.width;
}

哪个工作正常，但是 font属性必须是格式如下的字符串:[italic] [bold] <font-size> <font-family> .

我想用某个 text-weight 来计算文本的宽度, 并将字体设置为 700px <font-size> <font-family>不起作用。 MDN没有说任何关于数字 text-weight 的事情.

如何计算带有数字 text-weight 的元素的文本宽度？

Answer 1

context.font 接受与 CSS 相同的格式 font速记属性。

_取自MDN

/* size | family */
font: 2em "Open Sans", sans-serif;

/* style | size | family */
font: italic 2em "Open Sans", sans-serif;

/* style | variant | weight | size/line-height | family */
font: italic small-caps bolder 16px/3 cursive;

/* style | variant | weight | stretch | size/line-height | family */
font: italic small-caps bolder condensed 16px/3 cursive;

所以你也可以设置font-weight作为数字刻度，就像使用 CSS 一样:

const ctx = canvas.getContext('2d');
const str = "I'm bold";
// set the font as numeric-font-weight | font-size | font-name
ctx.font = '700 16px sans-serif';
console.log('bold:', ctx.measureText(str).width);

ctx.fillText(str, 0, 20)
// reset to normal font-weight
ctx.font = '400 16px sans-serif';
console.log('medium:', ctx.measureText(str).width);

<canvas id="canvas"></canvas>