行高垂直对齐字体
我有以下标记：
<div class="blockSection">
<h5>Title of the section</h5>
...
</div>
现在，.blockSection 的 h5 具有固定高度和背景图像，40px。为了垂直对齐文本，我总是将行高设置为与高度相同，因为文本不会分成两行或更多行。但问题是我正在使用带有 font-face 的字体，并且我不想在 Mac 上的 Firefox、Safari 中垂直对齐。在windows下IE看起来不错。
有人知道在不为浏览器应用不同行高的情况下使其正确的技巧吗？
I have the following markup:
<div class="blockSection">
<h5>Title of the section</h5>
...
</div>
now, the h5 for the .blockSection has a fixed height and a background image, 40px. For aligning the text vertically i always set the line-height same as the height, since the text wont break in 2 or more lines. But the problem is i'm using a font with font-face and i doesnt want to aligning vertically in Firefox, Safari on Mac. In windows IE looks good.
Anybody know the trick to make it right, without applying different line-height for browsers ?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
您可能只是运气不好......除了针对浏览器和浏览器的不同组合的黑客之外。操作系统。
“不存在对所有网页字体都同样有效的理想行高。每种字体都需要不同的默认行高，具体取决于其设计质量 - 无论是压缩还是宽，无论是紧还是松的字母间距，无论是上升还是下降与 x 高度等相比，下降部分是长是短。” - Webfonts.info
如果您从 Webfonts 获得了字体许可，他们有一个套件构建器，使您能够调整行高选项。 “边界框”适用于我在那里的一种字体。更多信息在这里： http://webfonts.info/ /webfonts-know-how/part-3-line-height-options-kitbuilder
另一个比条件样式表更好的选项，因为字体可能在不同浏览器和浏览器中呈现不同的效果。操作系统，您可以尝试这个 jQuery 插件，它使您能够检测浏览器和浏览器的组合。操作系统，然后对其应用一个类。并不理想，但这是一个选择。
http://www.icavia.com/2010/09/ solving-font-face-alignment-issues/
更新：另一个可以尝试的选择是 Font松鼠网页字体生成器。如果您有权使用相关字体，请在专家模式下使用此生成器，并确保选中“修复垂直指标”选项。
You might just be out of luck...outside of hacks to target different combinations of browsers & OS.
"There is no ideal line height that works equally well for all web fonts. Each typeface calls for a different default line height, depending on its design qualities — whether it’s condensed or wide, whether it has tight or loose letterspacing, whether its ascenders or descenders are long or short compared to the x-height etc." - Webfonts.info
If you licensed the font from Webfonts, they have a kit builder that enables you to fiddle with line-height options. "Bounding Box" worked for the one font I had there. More info here: http://webfonts.info//webfonts-know-how/part-3-line-height-options-kitbuilder
Another option that is better than conditional stylesheets, since the font may render differently across browsers & OS, you could try this jQuery plugin that enables you to detect combinations of browsers & OS and then apply a class to it. Not ideal but it's an option.
http://www.icavia.com/2010/09/solving-font-face-alignment-issues/
UPDATE: another option to try is the Font Squirrel Webfont Generator. If you have the rights to use the font in question, then use this generator in expert mode and be sure "Fix Vertical Metrics" option is checked.
垂直居中（在非 IE 浏览器中）的一种解决方案是在
h5上使用display: table-cell和vertical-align: middle。One solution for vertical centering (in non IE browsers) is using
display: table-cellandvertical-align: middleon yourh5.听起来 条件注释 可以解决问题。创建一个仅在一个行高内的 IE 样式表和一个具有其他浏览器行高的主样式表。
我知道您不想为不同的浏览器设置不同的行高，但如果 IE 正在执行您想要的操作而其他浏览器却没有，那么这是最好的解决方案。
It sounds like conditional comments would do the trick. Create an IE only stylesheet within one line-height and a main stylesheet with the line-height for the other browsers.
I know you don't want to set different line-heights for different browsers, but if IE is doing what you want and other browsers aren't, this is the best solution.