字体：糟糕的垂直度量会导致不同浏览器的行高度不一致。解？ [英] Font: poor vertical metrics cause inconsistent line-height rendering across browsers. Solution?

问题描述

经过几个小时的调试和研究后，我发现在浏览器中不可能垂直对齐垂直度量差的字体。
如果一个字体的垂直度量很差，它可能被渲染得太远或者太低，而且看起来很糟糕，尤其是在按钮内部。您可以使用本网站上的测试来检查字体的垂直度量标准：

我在CSS中尝试了不同的方法进行对齐，没有一个工作一致..我也尝试了一个小提琴里有相同的结果，我不能显示，因为字体是不自由的。
这是一个字体特定的问题，唯一的解决方案似乎是固定字体本身。

这是按钮的CSS（值是虚构的）：

  div.parent {
 height：40px 
} 
 h3 {
 line-height：40px; 
 font-size：14px 
} 
  

解决方案

我花了一段时间，但我发现我的字体分配器让我在下载之前配置字体。我能够添加线高度调整的字体。
这些是可用的选项：

lockquote
行高调整

• 最好（使用最好的方法来标准化这个字体的行高）
  
• 120％（重新定义行高为120％ ）
  
• 自动（在上行，下行和行间隙中分配OS / 2.Typo值）
  
• 边界框（匹配边界
  
• 原生（使用字体中定义的行高，每个浏览器的结果可能不同）
  

Bounding Box选项是有用的。

当我再次面对这个问题时，我会使用字体生成器来获得免费的字体，或者从分销商购买字体，选项来调整线框高度的权利...

After hours of debugging and pottering around I found out that it is impossible to vertically align a font with poor vertical metrics consistently across browsers. If a font has poor vertical metrics it may either be rendered too far up or too far down and looks horrible especially inside buttons. There is no way to solve this problem with css alone.

You can check the vertical metrics of a font with the tests on this website: http://levien.com/webfonts/vmtx/ (Just download a test and replace the font.)

This is the result I get. The upper one has poor metrics the one below has them right: (both have a fixed line-height)

Fontsquirrel offers a fix for poor vertical metrics in its generator in expert mode. Unfortunately the font I have to use belongs to Microsoft (SegoePrint) and is blacklisted on Fontsquirrel for the generator.

Update:

To make the problem clearer.. this is the situation I'm facing right now:

I'm trying to vertically align the text of the button to the middle (see image below). On the left you see how it is rendered in Chrome on Android, on the right you see how it's rendered in Chrome on Windows. Arial and most common fonts are nicely centered, Segoe Print is not..

I tried different approaches in CSS for the alignment and none worked consistently.. I also tried it inside a fiddle with the same result, which I can't show since the font is non-free. This is a font specific problem and the only solution seems to be fixing the font itself.

This is the CSS for the button (values are fictional):

div.parent {
    height:40px
}
h3 {
    line-height: 40px;
    font-size: 14px
}

解决方案

It took me a while, but I just found out that my font distributor lets me configure fonts before download. I was able to add "Line Height Adjustments" to the font. These were the available options:

Line Height Adjustments

• Best (Use the best method to normalize the line height for this font)
• 120% (Redefine the line height as 120% of the point size)
• Automatic (Distributes OS/2.Typo values across ascender, descender and line gap)
• Bounding Box (Match the bounding box of the glyphs, line gap will always be 0)
• Native (Use the line height as defined in the font, results may differ between browsers)

The "Bounding Box" option did the trick. Now "Segoe Print" is nicely adjusted.

Whenever I face this problem again I will either use the fontsquirrel generator for free fonts or purchase a font from a distributor that offers an option to adjust the line heights right out of the box...

这篇关于字体：糟糕的垂直度量会导致不同浏览器的行高度不一致。解？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！