iPhone 和 Firefox 上 Google 字体的字母重叠

【问题标题】：Overlap between letters of Google Font on iPhone and FirefoxiPhone 和 Firefox 上 Google 字体的字母重叠
【发布时间】：2014-06-02 06:28:00
【问题描述】：

我的网站上有一个使用 Google 字体“Cinzel”的徽标。当我在 Firefox 或 iPhone 上查看该网站时，两个中心字母重叠。我怎样才能防止这种重叠发生？

注意：我已经尝试设置字母间距而不改变中心字母。

相关的 CSS：

.brand {
    font-family: 'Cinzel Decorative', serif;
    text-decoration: none;
    text-transform: lowercase;  
}

.home{
    font-size: 1.5em;
    display: inline-block;
    height: 60px;
    padding: 16px 0px 4px 0px;
    margin-top: 1px;
    color: #000000;
}

铬：

火狐/iPhone：

感谢您的帮助！

【问题讨论】：

标签： css font-face webfonts google-webfonts google-font-api

【解决方案1】：

很遗憾，我无法更正 Google 网络字体中的问题。我改用 FontSquirrel 的 webfont 工具包，似乎没有问题。 http://www.fontsquirrel.com/fonts/cinzel

【讨论】：

“问题”实际上是 FireFox 实现的字体绘制比 Chrome 更好。这种字符配对是通过 OpenType GPOS "kerning" 实现的。因此，这样做有点不寻常，因为字距调整旨在调整完全正常的字母对之间的“尴尬”空间。典型的例子是“VA”；未紧缩，使用每个字符的自然宽度，视觉空间太宽。因此，一般来说，您需要字距调整。您使用的其他字体可能根本不包含字距调整，或者它恰好不包含这对。
顺便说一句：通常，在“o”和“q”之间插入一个零宽度空间应该会有所帮助。这个特殊字符的常见用法是防止连字结扎。然而，因为这不是连字（本应如此），所以这个技巧不起作用。
感谢@Jongware 的反馈，似乎是Google Web Fonts 中字体缺少字距调整的问题