Question

我正在创建一个密码转换器，由于空间的大小，我在adiconar数据上遇到了麻烦：

例如：如果我用键盘给10个空格，有多少px或Pt有??

默认情况下，我的css看起来像这样：

display: block;
p - block user agent stylesheet
font-family: arial;
.word - arial
font-size: 13.3333330154419px;
.word - 10pt
height: 15px;
margin-bottom: 0px;
* - 0px
margin-left: 0px;
* - 0px
margin-right: 0px;
* - 0px
margin-top: 0px;
* - 0px
padding-bottom: 0px;
* - 0px
padding-left: 0px;
* - 0px
padding-right: 0px;
* - 0px
padding-top: 0px;
* - 0px
text-transform: uppercase;
.word - uppercase
width: 1663px;
rendered Fonts
Arial-27 glyphs

在我们这里做的测试中，字体Arial 10pt，每个空间给出4px ......是吗？

    function getTextWidth(text, font) {
                // if given, use cached canvas for better performance
                // else, create new canvas
                var canvas = getTextWidth.canvas || (getTextWidth.canvas = document.createElement("canvas"));
                var context = canvas.getContext("2d");
                context.font = font;
                var metrics = context.measureText(text);
                return metrics.width;
            };


/console.log(getTextWidth(' ', "normal 10pt arial"));

Answer 1

与任何字符一样，空格的宽度取决于字体，并且通常不是整数个像素（即使渲染最终被栅格化为像素或子像素）。例如，对于Arial字体，在Windows 7上，空格的宽度为569个单位，其中“unit”是字体大小的1/2048，空格的宽度约为字体大小的0.278倍。对于13.3px的字体大小，这大约为3.7px。因此，它在光栅化中四舍五入为4px，但浏览器和其他程序可能以不同的方式处理一系列空格（在HTML中，白色空间的崩溃在适用时有其作用）。

我不知道这与密码转换器有什么关系，无论它们是什么。通过描述原始问题，您可能会获得更多有用的答案，而不是关于空间宽度的理论问题。

Answer 2

要知道的唯一方法是渲染文本并进行测量。

类似的东西：

HTML：

<span id="text-to-measure">WWWWWWWWWW</span>
<div id="answer"></div>

JS：

var textNode = document.getElementById('text-to-measure');
var width = textNode.offsetWidth

document.getElementById('answer').innerText = width

http://jsfiddle.net/uxtm5yb3/

但是如果你想弄清楚布局目的的尺寸，可能会有更好的方法。

Answer 3

它无法准确地告诉您，它总是取决于字体的指标和呈现方式。

See this example

1个空格的像素大小是多少

3 个答案: