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 |家庭* /
  字体：2em＆＃34;打开Sans＆＃34;，sans-serif;

/ * style |尺寸|家庭* /
  字体：italic 2em＆＃34; Open Sans＆＃34;，sans-serif;

/ * style |变种|重量|尺寸/线高|家庭* /
  字体：italic small-caps bolder 16px / 3 cursive;

/ * style |变种|重量|拉伸|尺寸/线高|家庭* /
  font：italic small-caps bolder浓缩16px / 3草书;

因此，您也可以将font-weight设置为数字刻度，就像使用CSS一样：

＆＃13;

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);

＆＃13;

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

＆＃13;

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

1 个答案: