字体大小和字符实际在屏幕上占据多少像素之间是什么关系？

Question

我正在建立一个专门的UI，在其中我需要确切地知道某个字符串占用了多少像素。

我一直在尝试使用font-size属性设置字符大小。但是字体大小和div宽度之间的关系不是我所期望的。例如，这是一个div，其中三个字符的大小均为25px。如您所见，文本未填充div的75px。

<div style="font-size:25px; width:75px; background-color:green">Dog</div>

谢谢！

Answer 1

font-size控制字符的高度，而不控制宽度：比例字体中的每个字母都有不同的宽度，适合于该字母（通常是“ W”和“ i”）。如果您希望每个字符占用相同的宽度，请改用等宽字体。当用于大量文本时，通常阅读起来不太舒服（它们适合单词）。

根据给定浏览器使用的字体渲染器，即使在特定像素大小下渲染的字体在不同的浏览器（或运行相同浏览器的不同操作系统）上也可能看起来略有不同。这也适用于等宽字体。

我强烈建议您不要对任何类型的UI都依赖精确的像素大小度量，除非您生成位图而不是使用字体，否则您确切知道期望的大小。（考虑一下，当用户尝试更改字体大小以使文本更易读时，UI会发生什么。给定的字体大小可能不适合所有读者。另一个示例是长度可变的单词：如果将单词自动适合UI，则简短字会很大，长字会很小。）

如果您使用的是实际文本（而不是预生成的图像），那么我将尽可能地设计UI，以使其灵活并能够处理像素大小/屏幕分辨率/缩放/等方面的大多数变化。

有关更多详细信息，请阅读本文。