Google 字体字母高度不一致

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 的 flags:// 来启用 D​​irect Write。

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

一种技巧是更改字体堆栈，以便专门为 web-kit 调用 SVG。

您可以通过媒体查询 hack 来做到这一点：

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

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