下图显示了以下各项的结果：
div.test { background: #00F; font-size: 50px; line-height: 50px; color: #FFF; margin: 50px 0; font-family: Wiesbaden; }
一个使用Wiesbaden（是font-face），另一个不使用. font-face字体，似乎忽略了line-height属性。
Wiesbaden
font-face
是字体的问题还是字体的问题？
kxkpmulp1#
属性line-height只指定一行的开始和下一行的开始之间的垂直距离。如果你键入了两行的内容，第二行的开始应该在相同的垂直位置使用任何一种字体。看起来这就是你的字体在“font-size：如果你愿意，你可以增加font-size，同时保持line-height: 50px来修正它。
line-height
font-size
line-height: 50px
jutyujz02#
简而言之，这两个都不是问题。它们的行为完全符合它们应该的样子。看到你的蓝色背景了吗？那是你的行高。行高不影响字体本身，而是文本行的间距。即使设置为相同的font-size，某些字体的大小也会不同。这是字形的呈现方式。如果希望文本更大，请增大字体大小。如果希望回退字体大小相同，则可以使用大小相似的字体（查找“字体堆栈生成器”以获得相关帮助），或者查看the CSS3 font-size-adjust property（请注意，它是CSS3，因此您需要仔细检查它的支持）。
font-size-adjust
mbzjlibv3#
我也遇到过类似的问题，但是我用Cufon脚本代替了fontface来避免浏览器问题。为了解决我的行高问题，我把doctype从transitional改为strict。试试看。
0ejtzxu14#
下面的小提琴说明了4种字体之间的差异（3种是Mac、PC等上非常常见的字体）。一种是谷歌字体。无论如何，4种字体--四种不同的结果。如果一个设计要严重依赖“非标准”字体，确保后备方案不会把整个事情搞砸。特别注意以下方面的差异：
_网址：http：jsfiddle.net/suK2U/
2mbi3lxu5#
我试过这个，效果很好！！只要玩百分比，直到你找到需要的结果。将此应用于您的@font-face：
ascent-override: 90%;
希望能有所帮助！更多信息：https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override
5条答案
按热度按时间kxkpmulp1#
属性
line-height只指定一行的开始和下一行的开始之间的垂直距离。如果你键入了两行的内容，第二行的开始应该在相同的垂直位置使用任何一种字体。看起来这就是你的字体在“font-size：如果你愿意，你可以增加
font-size，同时保持line-height: 50px来修正它。jutyujz02#
简而言之，这两个都不是问题。它们的行为完全符合它们应该的样子。看到你的蓝色背景了吗？那是你的行高。行高不影响字体本身，而是文本行的间距。
即使设置为相同的
font-size，某些字体的大小也会不同。这是字形的呈现方式。如果希望文本更大，请增大字体大小。如果希望回退字体大小相同，则可以使用大小相似的字体（查找“字体堆栈生成器”以获得相关帮助），或者查看the CSS3font-size-adjustproperty（请注意，它是CSS3，因此您需要仔细检查它的支持）。mbzjlibv3#
我也遇到过类似的问题，但是我用Cufon脚本代替了fontface来避免浏览器问题。为了解决我的行高问题，我把doctype从transitional改为strict。试试看。
0ejtzxu14#
下面的小提琴说明了4种字体之间的差异（3种是Mac、PC等上非常常见的字体）。一种是谷歌字体。无论如何，4种字体--四种不同的结果。如果一个设计要严重依赖“非标准”字体，确保后备方案不会把整个事情搞砸。
特别注意以下方面的差异：
_网址：http：jsfiddle.net/suK2U/
2mbi3lxu5#
我试过这个，效果很好！！只要玩百分比，直到你找到需要的结果。
将此应用于您的@font-face：
希望能有所帮助！
更多信息：
https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/ascent-override