cavsTxt.measureText дает различную ширину для текста в зависимости от его семейства шрифтов и размера шрифта

Question

Я хочу найти ширину текстового элемента, используя cavsTxt.measureText. Основываясь на ширине, я проверю, не переполнено ли оно родительским элементом. Я получаю другую ширину при изменении семейства шрифтов и его размера.

cavsElem = document.createElement("canvas");
cavsTxt =  cavsElem.getContext("2d");

//when font family as Calibri and size as 11pt
cavsTxt.font = "11pt Calibri normal";
width = cavsTxt.measureText("Clear green fluorite with tiny crystals of 
pyrite on top").width // 313.88671875

//when font family as arial  and size as 10pt
cavsTxt.font = "13px arial normal";
width = cavsTxt.measureText("Clear green fluorite with tiny crystals of 
pyrite on top").width // 285.4099426269531

это поведение или проблема? как добиться моего требования.

Answer 1

Да, вы получите разные размеры с разными шрифтами.

Просто визуализируйте его, чтобы увидеть, что он делает, вот пример, основанный на вашем коде:

var text = "Clear green fluorite with tiny crystals of pyrite on top ."
var canvas = document.getElementById("canvas");
cavsTxt = canvas.getContext("2d");

function drawText(font, x, y) {
  cavsTxt.beginPath();
  cavsTxt.font = font;
  width = cavsTxt.measureText(text).width
  
  cavsTxt.lineWidth = 20;
  cavsTxt.strokeStyle = "red";  
  cavsTxt.moveTo(x+5, y+15);
  cavsTxt.lineTo(width + x+5, y+15);
  cavsTxt.stroke();
  
  cavsTxt.fillText(cavsTxt.font, x, y);
  cavsTxt.fillText(text, x+5, y+20);
  cavsTxt.fillText(width, width+15, y+20);
}

//when font family as Calibri and size as 11pt
drawText("11pt Calibri normal", 5, 15);


//when font family as arial  and size as 10pt
drawText("13px arial normal", 5, 55);

drawText("13px arial", 5, 95);
drawText("bold 13px arial", 5, 140);

<canvas id="canvas" height=175 width=500 style="border:1px solid #000000;">
</canvas>

С этим вы можете определить, будет ли текст помещаться на родительский элемент или выполнять какие-либо специальные эффекты