html - 1个空间的像素大小是多少

Question

我正在创建一个密码转换器，由于空格的大小，我在处理数字时遇到了麻烦:

例如:如果我用键盘输入 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个单位，其中“单位”是字体大小的1/2048，一个空格的宽度大约是字体大小的0.278倍，em。对于 13.3px 的字体大小，这给出了大约 3.7px。因此，它在光栅化中四舍五入为 4px，但浏览器和其他程序可能会以不同的方式处理一系列空格(在 HTML 中，空白的折叠在适用时有其作用)。

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