html5-canvas中的不同字体宽度

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返回的数字在这两种情况下都是正确的。

​

​

C#提供了与IE相同的数字，因为它们使用相同的文本呈现算法，但当您的页面在其他浏览器上运行时，它没有任何意义。

您可以在此thread中找到一些技巧和技巧，但实际上您无法真正控制浏览器呈现机制。如果你想确保你的文本在所有的浏览器上都是一样的，唯一的方法就是把它变成一个图像。