字体像素与点数？

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>