Question

我有一个非常简单但非常讨厌的问题。我尝试在画布中读取字符串的宽度。我知道怎么做，它的确有效。但结果因浏览器而异。

ctx.font = "10px Arial";
var txt = "This is a text demonstration. Why is the width of this text different in every browser??";
ctx.fillText("width:" + ctx.measureText(txt).width, 10, 50);
ctx.fillText(txt, 10, 100);

这里有点小提琴：http://jsfiddle.net/83v7c4jv/

Chrome：390px，IE：375px，Firefox：394px。只有IE是准确的，因为如果我在那里试试C＃给我相同的结果。有没有人知道为什么以及如何让Chrome和Firefox渲染和计算像IE一样的值？

Answer 1

您需要阅读this answer

它在某些项目中对我有用，我使用此代码来获取文本的高度，因为它不存在它将与文本宽度相同

obj.lineHeight = function(){


                var testDiv = document.createElement('div'); // creating div to measure text in 
                    testDiv.style.padding= "0px";
                    testDiv.style.margin = "0px";
                    testDiv.style.backgroundColor = "white";
                    testDiv.textContent = "Hello World !";
                    testDiv.style.fontSize = obj.size+"px";
                    testDiv.style.fontFamily = obj.fontFamily;
                    testDiv.style.clear = "both";
                    testDiv.style.visibility="hidden";
                    document.body.appendChild(testDiv);
                    var __height__ =  testDiv.clientHeight;
                    testDiv.style.display = "none";
                    document.body.removeChild(testDiv);

                    return __height__ ;

            };

Answer 2

首先，相同的字体可能在不同的浏览器中呈现不同。注意以下图片。我只是把你的JSFIDDLE的截图放在Chrome（第一个）和IE（第二个）上运行。如您所见，文本宽度实际上并不相同，ctx.measureText返回的数字在两种情况下都是正确的。

enter image description here

C＃为您提供与IE相同的编号，因为它们使用相同的文本渲染算法，但当您的页面在其他浏览器上运行时没有任何意义。

你可以在这个thread中找到一些技巧和黑客，但事实上你无法真正控制浏览器渲染机制。如果您想确保所有浏览器上的文字完全相同，只能将其转换为图片。

html5-canvas中的字体宽度不同

2 个答案: