谷歌字体字母高度不一致

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转向Blink。 Chrome也决定放弃微软字体渲染。结果是子像素渲染不佳。您已经注意到，一旦您的字体大小或重量出现问题，问题就解决了，因为字符笔划比一个像素宽。

一种解决方案：您可以使用Chrome的标志：//启用直接写入。

但当然，这对用户没有帮助。有几个黑客。

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

您可以使用媒体查询黑客执行此操作：

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

所以这有问题。这不是面向未来的。这是一个黑客攻击。但它现在有效，Chrome将在不久的将来解决这个问题。其他，黑客攻击包括首先在堆栈中调用SVG，但结果不太可靠。

Answer 2

我遇到了与Windows浏览器相同的问题，我尝试在堆栈中首先使用SVG，但它没有用 - 我后来发现Chrome已经放弃了对SVG字体的支持。所以我尝试使用首先放在堆栈中的字体的TTF版本，由于某种原因它解决了问题。在Chrome，Firefox和Edge中进行了测试。奇怪的是，如果我在数据URI中引用TTF，它会再次回到不一致的字母高度。