使用 "f" 和 "i" 时的 Safari 字距调整问题

Question

我是运行 OS X 10.10.3 上的 Safari 8.0.5。

每当使用字符 "f" 和 "i" 并排使用时，我运行遇到了字母间距问题。我的猜测是这是一个 Safari 错误，我已经将它提交给 Apple，但同时也想看看我是否可以找到解决方法。

HTML 以两种不同的字体输出短语 "The fish is large"。为了强调这个问题，我在每个字符之间添加了 10px 的字母间距。

HTML:

<div class="p1">
    The fish is large
</div>
<div class="p2">
    The fish is large
</div>

CSS:

div { letter-spacing: 10px; margin-bottom: 10px; }

div.p1 { 
    color: #009900;
    font-family: Helvetica;
}
div.p2 {
    color: #000099;
    font-family: Arial;
}

以上是我在 Safari 中的输出结果：

出于测试目的，我在 "f" 和 "i" 字符之间添加了一个 HTML 注释，这似乎有效：

<div class="p1">
    The f<!----->ish is large
</div>

输出如下：

虽然这在技术上可行，但对我来说并不是一个理想的解决方案，因为此处的内容实际上是由 WYSIWYG 编辑器生成的。

似乎只有当 "f" 和 "i" 紧挨着时才会出现问题。我不确定这些字母在 Safari 中是否有特殊含义，但这是英语中很常见的字母序列，所以它们真的不应该有这么小的关键字。

我也试过添加这个：

 -webkit-font-feature-settings: "kern";

这确实将 "s" 推到了右边，但是 "f" 和 "i" 仍然挤在一起。

大写的"F"没有同样的问题：

"fi" 后面的字符似乎无关紧要。我可以将其更改为其他任何内容，但它仍然存在相同的问题。

如果 "fi" 出现在单词中间，它也会做同样的事情：

我已经确认这个问题似乎也存在于我的 iPhone 6 Plus 运行最新版本的 Safari 上，所以我怀疑这只是我的问题。

为了说明这个问题，我创建了一个带有必要的 HTML 和 CSS 的 jsfiddle，希望能在您这边重现这个问题。 https://jsfiddle.net/38keruv7/4/

有没有人有任何解决方法的想法，而不涉及要求我的客户在所见即所得编辑器中的文字中间插入 HTML 注释？

我想我可以在输出数据之前扫描并替换该特定组合，但在处理更大的数据块时，这似乎是对服务器资源的一种相当低效的使用。

Answer 1

您似乎发现了一个 Safari 错误。加入的"fi"是一个typographic ligature. CSS3 has a font-variant-ligatures属性，可以用来控制它们； Safari 支持使用 -webkit 前缀。看起来 -webkit-font-variant-ligatures: no-common-ligatures; 解决了问题，至少在 Safari 8.0.3 中是这样：

div {
    -webkit-font-variant-ligatures: no-common-ligatures;
    letter-spacing: 10px;
    margin-bottom: 10px;
}

这是更新后的 fiddle：https://jsfiddle.net/38keruv7/5/

如果您仍然遇到问题，这里有一个相关问题 rendering: optimizeSpeed; 也解决了问题：Letters Connected in Safari

使用 "f" 和 "i" 时的 Safari 字距调整问题

Safari kerning issue when using "f" and "i"

html

css

fonts

safari

letter-spacing