javascript - measureText()制表符

我期望TAB字符比SPACE字符宽，但是在HTML5 Canvas 中，它们是相同的。再加上其他一些，这些并不是您所关心的:

var c=document.getElementById('mycanvas').getContext('2d');
c.font='24px Sans-Serif';
c.measureText('\t').width; // 7
c.measureText('\r').width; // 7
c.measureText('\n').width; // 7
c.measureText(' ').width;  // 7
c.measureText('\b').width; // 0
c.measureText('a').width;  // 13

我正在canvas中渲染文本，并且想要使TAB相对于SPACE具有令人惊讶的宽度。我应该使用什么值(倍数？)？

最佳答案

您可以确信context.measureText('\t')将始终返回当前字体中空格字符的宽度。

这就是为什么

.measureText使用内联框测量文本。

WhatWG.org指定measureText.width返回内联框值:

https://html.spec.whatwg.org/multipage/scripting.html#dom-context-2d-measuretext



内联框将制表符折叠为空格字符。

W3.org指定将一个制表符折叠到一个空格中:

http://www.w3.org/TR/CSS2/text.html#white-space-model