html - 使用 "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”出现在单词中间，它也会做同样的事情:

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

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

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

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

Answer 1

您似乎发现了一个 Safari 错误。加入的“fi”是一个typographic ligature . CSS3 有一个 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