Question

我采用设计师规范并将其转换为HTML / CSS。我仍然遇到同样的问题 - 设计师将指定一个矩形，其中一些文本垂直居中。他将矩形的高度指定为36像素，字体指定为18px。我将创建一个没有边框的36像素DIV和9像素填充顶部（使用内置于引导程序中的盒子模型）。尽管如此，文字总是太过分了。看起来文字大于18像素。截图并在Photoshop中测量显示文本高20像素。

我错过了什么吗？屏幕与屏幕之间的像素是否不一致？字体像素是否与屏幕像素不同？我现在读取的字体应该是高DPI屏幕的点数。这有关系吗？

Answer 1

字体大小与文本的高度并不完全对应，它是一个稍微随意的值，用于反映字体的大小。不同风格的字体可能具有略微不同的实际尺寸，以使它们看起来大小相似。

除此之外，不同浏览器的字体大小略有不同，因此浏览器之间的实际大小可能会有不同的像素。

此外，字体大小不包括行高，默认情况下会增加20％的高度。

我通常用来在一个元素中垂直居中一行，就是将行高设置为元素的高度。例如：

div {
  background: #eee;
  height: 50px;
  line-height: 50px;
}

<div>Text</div>

Answer 2

一种类型的18px字体不一定与另一种字体的18px相同。您可以使ascenders和descenders可以使字体看起来更大，但CSS字体大小不考虑这一点。因此，我们需要查看您正在使用的字体，但尝试以字体大小为中心很少有效，如果您以后更改字体则不可靠。

Answer 3

像素在屏幕之间有所不同。某些屏幕上的像素比其他屏幕更大。有些屏幕比其他屏幕有更多像素。这可能是一个问题，尤其是在定义width和height属性时。

无论屏幕尺寸或像素数是多少，

ex和em都将保持一致（相对空间而非实际尺寸）。

示例用途：

Height: 10ex; Width: 10ex;

This是一篇很好的文章，深入解释了这一切。

字体像素与点数？

3 个答案: