我正在构建一个专门的 UI，我需要在其中确切地知道某个字符串占用了多少像素。
我一直在尝试使用 font-size 属性设置字符大小。但是 font-size 和 div 的宽度之间的关系并不是我所期望的。例如，这里有一个包含三个字符的 div，每个字符的大小为 25px。如您所见，文本没有填满 div 的 75px。
<div style="font-size:25px; width:75px; background-color:green">Dog</div>
- 发生了什么事？
- 我正在寻找某种方法来确保 dog 真正适合它的 div。有什么建议吗？
谢谢!
最佳答案
font-size 控制字符的高度，而不是宽度:比例字体中的字母每个都有不同的宽度，适合字母(通常的例子是“W”和“i”)。如果您希望每个字符占用相同的宽度，请改用等宽字体。当用于大量文本时，它们通常阅读起来不太舒服(它们适合单词)。
根据给定浏览器使用的字体渲染器，即使以特定像素大小渲染的字体在不同浏览器(或运行同一浏览器的不同操作系统)上看起来也可能略有不同。这也适用于等宽字体。
我强烈建议不要对任何类型的 UI 依赖精确的像素大小测量，除非您生成位图而不是使用字体，这样您就可以确切地知道期望的大小。 (考虑当用户试图更改字体大小以使文本更具可读性时 UI 会发生什么。给定的字体大小可能不适合所有读者。另一个例子是不同长度的单词:如果您将单词自动调整到 UI，短单词会很大，长单词会很小。)
如果您使用实际文本(而不是预生成的图像)，我会尽可能灵活地设计 UI，并能够处理像素大小/屏幕分辨率/缩放等方面的大多数变化。
有关详细信息，请阅读 this article .
关于html - 字体大小与字符实际在屏幕上占据多少像素之间的关系是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33684822/