@font-face和line-height问题

Question

下图显示了以下各项的结果：

div.test { background: #00F; font-size: 50px; line-height: 50px; color: #FFF; margin: 50px 0; font-family: Wiesbaden; }

一种字体使用Wiesbaden (即字体)，另一种不使用。font-face字体似乎忽略了行高属性。

​

​

是字体问题还是字体问题？

Answer 1

简而言之，这两者都不是问题。他们的行为完全是他们应该做的。看到你的蓝色背景了吗？这就是你的行高。行高不会影响字体本身，但会影响文本的行距。

即使设置为相同的font-size，某些字体的大小也不同。这是字形的呈现方式。如果您希望文本更大，请增大字体大小。如果您希望回退具有相同的大小，您可以使用大小相似的字体(查找“字体堆栈生成器”以获得这方面的帮助)，或者查看the CSS3 font-size-adjust property (请注意，它是CSS3，因此您需要仔细检查它的支持情况)。

Answer 2

特性line-height仅指定一行的起点和下一条直线的起点之间的垂直距离。如果您键入的内容占了两行，则第二行的开头应使用任意一种字体位于相同的垂直位置。

看起来这就是你的字体“font -size:50px”的样子。如果你愿意，你可以在保持line-height: 50px的同时增加font-size来纠正它。

Answer 3

我也遇到过类似的问题，但我使用了Cufon脚本而不是fontface来避免浏览器问题。为了解决我的行高问题，我将doctype从过渡改为严格。试试看。