谷歌字体字母高度不一致

Question

我在Chrome浏览器中遇到了一个奇怪的问题，谷歌字体的字母高度不一致。 只有当我使用text-transform: uppercase时才会出现这种情况，如果我使用font-weight:bold则可以解决这个问题。我有一些示例代码，您可以看到单词TESTING中的S太高了。

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属性，以便正确呈现字体？

- Alex W

---

这里在Mac/Chrome上看起来完美无缺。 - Interrobang

Answer 1

这是Chrome在Windows上已知的一个bug。Chrome已经采取了减少对其他公司和技术依赖的政治/生态系统动作，如从Web-Kit中分离Blink。 Chrome还决定放弃Microsoft字体渲染，结果是次像素渲染质量差。您会注意到，一旦您增加字体大小或权重，问题就得到解决，因为字符笔画比一个像素宽。

一个解决方案：您可以进入Chrome的flags://启用Direct Write。

但当然这不能帮助用户。有一些黑客。其中一个黑客是改变您的字体堆栈，以便专门为web-kit调用SVG。

您可以使用媒体查询黑客来实现此操作：

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

所以这存在问题。它不是未来可靠的解决方案，而只是一个hack。但目前它可以使用，并且Chrome将在不久的将来修复此问题。其他hack包括在你的堆栈中首先调用SVG，但其结果不太可靠。

- fontophilic

---

我刚刚检查了Firefox，它也有同样的问题。这个问题在Firefox中也存在吗？另外，有没有一种“hack”方法，不需要去处理SVG文件？ - Alex W

我仍然遇到这个问题。现在是2016年5月，但它仍未修复。为什么类似这样恼人的错误需要数年才能解决？ - thephpdev

Answer 2

我在Windows浏览器上遇到了同样的问题，我尝试首先使用SVG字体，但它没有起作用 - 后来我发现Chrome已经放弃了对SVG字体的支持。所以我尝试使用TTF版本的字体，将其放在堆栈的最前面，出乎意料地解决了这个问题。在Chrome、Firefox和Edge中进行了测试。奇怪的是，如果我在数据URI中引用TTF，则会再次出现不一致的字母高度。

- Oliver