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

问题描述

经过数小时的调试和摸索，我发现不可能在浏览器中一致地垂直对齐具有较差垂直指标的字体.如果字体的垂直度量很差，它可能会被渲染得太高或太低，而且看起来很糟糕，尤其是在按钮内部.单靠css没有办法解决这个问题.

您可以通过以下网站上的测试检查字体的垂直度量:

我在 CSS 中尝试了不同的对齐方法，但没有一种方法始终如一.我也在小提琴中尝试过，结果相同，但由于字体非自由而无法显示.这是一个特定于字体的问题，唯一的解决方案似乎是修复字体本身.

这是按钮的 CSS(值是虚构的):

div.parent {高度:40px}h3{行高:40px；字体大小:14px}

解决方案

我花了一段时间，但我才发现我的字体经销商允许我在下载前配置字体.我能够添加线高调整"；到字体.这些是可用的选项:

<块引用>

行高调整

• 最佳(使用最佳方法标准化此字体的行高)
• 120%(重新定义行高为点大小的 120%)
• 自动(将 OS/2.Typo 值分配到上升部、下降部和行距)
• 边界框(匹配字形的边界框，行距始终为 0)
• 原生(使用字体中定义的行高，结果可能因浏览器而异)

边界框"选项成功了.现在Segoe Print"调整得很好.

每当我再次遇到这个问题时，我要么使用 fontsquirrel 生成器获取免费字体，要么从分销商处购买字体，该分销商提供开箱即用的调整行高选项...

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屋！