字体大小与字符实际占据屏幕的像素数之间的关系是什么？

Question

我正在构建一个专门的UI，我需要知道完全某些字符串占用了多少像素。

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

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

1. 发生了什么事？
2. 我正在寻找一些方法来确保狗适合它的div。有什么建议吗？

谢谢！

Answer 1

font-size控制字符的高度，而不是宽度：比例字体中的字母每个都有不同的宽度，适合字母（通常的例子是＆＃34; W＆＃34;和＆＃34; i＆ ＃34）。如果希望每个字符占据相同的宽度，请使用等宽字体。当用于大量文本时，这些阅读通常不太舒服（他们对单词很好）。

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

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

如果你使用实际文本（而不是预生成的图像）​​，我会尽可能地设计UI，使其灵活，能够处理像素大小/屏幕分辨率/缩放/等的大多数变化。 / p>

有关详细信息，请阅读this article。

Answer 2

你最好的选择是不断调整字体大小，直到它适合你想要的空间，如果它对于单词宽度来说真的那么重要。我主要是艺术家，我做了很多类型的表达，所以当我说你不希望你的所有字母都是相同的大小，它只是不能正常流动时，如我所说，在W的另一个答案中指出和我。根据最终结果，您可能希望使用“vw”或“vh”而不是“px”或“pt”来查看文本大小，这有助于它与用户正在查看您的应用的屏幕大小保持成比例。< / p>