line-height 垂直对齐 font-face答案

【问题标题】：line-height vertical align font-faceline-height 垂直对齐 font-face
【发布时间】：2014-01-10 09:36:56
【问题描述】：

我有以下标记：

<div class="blockSection">
<h5>Title of the section</h5>
...
</div>

现在，.blockSection 的 h5 具有固定的高度和 40 像素的背景图像。为了垂直对齐文本，我总是将行高设置为与高度相同，因为文本不会分成 2 行或更多行。但问题是我使用的是带有 font-face 的字体，我不想在 Firefox、Mac 上的 Safari 中垂直对齐。在 windows IE 看起来不错。

任何人都知道在不为浏览器应用不同行高的情况下使其正确的技巧吗？

【问题讨论】：

标签： html css font-face

【解决方案1】：

您可能只是运气不佳...除了针对浏览器和操作系统的不同组合的黑客攻击之外。

“没有理想的行高适用于所有 Web 字体。每种字体都需要不同的默认行高，具体取决于其设计质量 - 是压缩还是宽，是否有紧或松的字母间距，是否与 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 Squirrel Webfont Generator。如果您有权使用相关字体，请在专家模式下使用此生成器并确保选中“修复垂直度量”选项。

【讨论】：

【解决方案2】：

垂直居中的一种解决方案（在非 IE 浏览器中）是在您的 h5 上使用 display: table-cell 和 vertical-align: middle。

【讨论】：

是的，它确实适用于默认的网络字体，但我的字体不是:)
嗯，我刚刚尝试使用 Google 网络字体，但仍然可以：jsfiddle.net/ux2eE/2。我想在这种情况下你的字体有问题。你能提供任何细节吗？可以放到网上吗？
一定有其他因素影响它。在 Firefox 和 Chrome 中对我来说似乎完全居中：yfrog.com/jacenteredp
对 :) 但正如我首先所说的，问题在于 OS X 渲染，在 Windows 上它对我来说也非常好！
啊，我没有意识到它也是 Mac Firefox。这似乎是 Mac 特有的问题。那里我帮不了你。最后一个建议而不是真正的居中只是给元素一个顶部和底部填充。

【解决方案3】：

听起来conditional comments 可以解决问题。在一个 line-height 内创建一个仅限 IE 的样式表，并为其他浏览器创建一个 line-height 的主样式表。

我知道您不想为不同的浏览器设置不同的行高，但是如果 IE 正在执行您想要的操作而其他浏览器没有，这是最好的解决方案。

【讨论】：