@ font-face和line-height问题

Question

下面的图片显示了以下结果：

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

一个使用Wiesbaden（字体为face）而另一个没有。font-face字体似乎忽略了line-height属性。

是字体问题还是字体？

Answer 1

属性line-height仅指定一行开头与下一行开头之间的垂直距离。如果您输入占用两行的内容，则第二行的起点应使用任一字体处于相同的垂直位置。

看起来这就是你的字体看起来'font-size：50px'。如果您愿意，可以在保持font-size更正的同时增加line-height: 50px。

Answer 2

简而言之，这也不是问题。他们的行为应该如何。看到你的蓝色背景？这是你的行高。行高不会影响字体本身，而是影响文本行的间距。

即使设置为相同的font-size，某些字体的大小也不同。这是字形呈现的方式。如果希望文本更大，请增加字体大小。如果你想要回退大小相同，你可以使用类似大小的字体（查找“字体堆栈生成器”以获得帮助），或者查看the CSS3 font-size-adjust property（请注意它是CSS3，所以你'我想仔细检查它的支持。）

Answer 3

我有类似的问题，但我使用Cufon脚本而不是fontface来避免浏览器问题。为了解决我的行高问题，我将doctype从transitional更改为strict。试试吧。

Answer 4

以下小提琴演示了4种字体之间的差异（3种是Mac，PC等上常见的字体）。一个是谷歌字体。无论如何，4种字体 - 四种不同的结果。如果设计将严重依赖于“非标准”字体，请确保后备不会影响整个事物。

特别注意以下方面的差异：

• 大写Q与其父级边界之间的顶部间距
• Xx的各种高度（特别是小写与资本）
• 小写G的下降（有些实际上是从他们的 亲本）

_http：//jsfiddle.net/suK2U/