如何通过计算像素来设置字体大小?

平面设计 字体大小 网站设计 网络字体
2022-01-12 10:58:43

我有一个拟议网站的图像。

如何通过计算像素来计算将文本设置为的 px 字体大小值?

例如,我有 font-size: 14px,(在 Arial 中),但从“L”的顶部到“p”的尾部向下计数,我在“L”上计数 10 个像素,尾部额外增加 3 个像素“p”。这显然没有给我14。

有没有办法通过可靠地计算像素来锻炼字体大小值?

3个回答

一般问题几乎可以通过字体大小精确转换为什么来回答?- 即大小并不意味着任何非常具体的东西。

但鉴于您正在使用已知的特定字体,您确实应该能够将模型上的像素数转换为其标称像素大小 - 您需要做一些实验来计算出比率。

但我建议通过比较来做到这一点要容易得多,即只需更改网页上的大小直到它与模型匹配,如有必要,覆盖屏幕截图以进行检查。请记住,您的浏览器的字体渲染不太可能与 Photoshop 渲染或其他平台上的浏览器渲染完全匹配。

在典型的文本大小下,大多数字体从上到下都有 1 到 4 像素的“缓冲区”。

您通常可以直接将压缩时使用的像素大小应用到 CSS 中。IOW,如果 Photoshop/Illustrator 在 130% 的前导上说 14px,你的 CSS 会说

font-size:14px
line-height:1.3em

我不认为计算像素是可靠的。原因是,当我循环浏览字体时,比如在 Photoshop 中,它们总是以随机大小显示。我知道 PS 不是网络,但这表明一种字体的 14 像素可能比另一种字体大得多。

我已经成功地将屏幕截图放入 Photoshop 并将其对齐。当然,您需要确保您的屏幕截图为 100% 并且您使用相同的字体。

然而,查看网页使用的字体大小的最好和最快的方法是查看网页源。如果style="font-size: 14px;"标记中的某处未提及它,则它在样式表中(很可能)。查找以 .css 结尾的页面代码顶部附近的链接并访问该链接。寻找font-sizeandfont-family声明。这将告诉您使用什么字体以及网页各种元素的大小。