css - 字体的紧凑形式会干扰垂直对齐

Question

我有这个代码:

li
{
   width: 200px; height: 22px; overflow: hidden;
   float: left;

   line-height: 22px; letter-spacing: -1px;
   font-weight: 400; font-size: 14px; font-family: "Helvetica Neue";
   text-transform: uppercase;
}

我注意到，如果我分开写所有字体属性，那么我的文本将位于 li 框中垂直对齐的中间。

font: 400 14px "Helvetica Neue";

否则，如果我使用紧凑形式，文本将在顶部垂直对齐。

我想了解为什么会这样。

提前谢谢大家。

Answer 1

DEMO

CSS 速记属性描述为

selector {  
    font: font-style font-variant font-weight font-size/line-height font-family;  
} 

1) 在你的例子中:font: 400 14px "Helvetica Neue";
这里你没有定义任何行高，因此它采用默认行高，文本似乎垂直对齐顶部

2) 如果你使用font: 400 14px/22px "Helvetica Neue";
在这里你定义行高 - 22px 这将是垂直居中对齐

旁注

垂直居中对齐因为 LI 的高度 = 行高

Article URL