gpt4 book ai didi

html - 字体大小与字符实际在屏幕上占据多少像素之间的关系是什么?

转载 作者:太空狗 更新时间:2023-10-29 15:54:36 24 4
gpt4 key购买 nike

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

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

<div style="font-size:25px; width:75px; background-color:green">Dog</div>
  1. 发生了什么事?
  2. 我正在寻找某种方法来确保 dog 真正适合它的 div。有什么建议吗?

谢谢!

enter image description here

最佳答案

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

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

我强烈建议不要对任何类型的 UI 依赖精确的像素大小测量,除非您生成位图而不是使用字体,这样您就可以确切地知道期望的大小。 (考虑当用户试图更改字体大小以使文本更具可读性时 UI 会发生什么。给定的字体大小可能不适合所有读者。另一个例子是不同长度的单词:如果您将单词自动调整到 UI,短单词会很大,长单词会很小。)

如果您使用实际文本(而不是预生成的图像)​​,我会尽可能灵活地设计 UI,并能够处理像素大小/屏幕分辨率/缩放等方面的大多数变化。

有关详细信息,请阅读 this article .

关于html - 字体大小与字符实际在屏幕上占据多少像素之间的关系是什么?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33684822/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com