html - 谷歌字体字母高度不一致

Question

我在 Chrome 中遇到一个奇怪的问题，即 Google 字体显示不一致的字母高度。它只在我使用 text-transform: uppercase 时发生，如果我使用 font-weight:bold 则它是固定的。我有一些示例代码，您可以在其中看到 S 在单词 TESTING 中太高了:

body {
    font-family: 'Exo 2' !important;
    line-height:1.42857143;
}
div {
    width:40px;
}
span.upper {
    display:block;
    margin-top:20px;
    font-size:18px;
    text-transform:uppercase;
}
span {text-transform:uppercase; }

<link href="//fonts.googleapis.com/css?family=Exo+2:200,300,400,700,300italic,400italic,700italic|Raleway:200,300,400,600" rel="stylesheet" type="text/css">
    <div>
        Broken:<br>
        <a href="#">
            <span class="upper">Testing 123</span> </a>
        
        <br>Normal:<br><br>
        <span>Testing 123</span>
        
    </div>

如果我将字体更改为arial，它就被修复了。是否需要重置某些 CSS 属性以便字体正确呈现？

Answer 1

这是 Windows 版 Chrome 中的一个众所周知的错误。 Chrome 已采取政治/生态系统举措，以减少对其他公司和其他成熟技术的依赖，例如从 Web-Kit fork Blink。 Chrome 还决定放弃 Microsoft 字体渲染。结果是较差的子像素渲染。您已经注意到，一旦您增大字体的大小或粗细，问题就解决了，因为字符笔画比一个像素宽。

一个解决方案:您可以进入 Chrome 的 flags://以启用直接写入。

但这当然对您的用户没有帮助。有一些技巧。

One hack is to change up your font stack, so that SVG is called specifically for web-kit.

您可以使用媒体查询 hack 来做到这一点:

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: 'chunk-webfont';
        src: url('webfont.svg') format('svg');
    }
}

所以这里有问题。这不是面向 future 的。这是一个黑客。但它目前有效，Chrome 将在不久的将来修复此问题。其他技巧包括首先在您的堆栈中调用 SVG，但它的结果不太可靠。