使用“f”时的Safari间距问题和“i” [英] Safari kerning issue when using "f" and "i"

问题描述

我在OS X 10.10.3上运行Safari 8.0.5。

I am running Safari 8.0.5 on OS X 10.10.3.

我使用字符f时遇到了字母间距问题i紧挨着。我的猜测是，这是一个Safari的bug，我已经提交到苹果这样，但也想看看，如果我能找到一个解决方法在同一时间。

I've ran into a letter-spacing issue whenever using the characters "f" and "i" right next to each other. My guess is that this is a Safari bug, and I've submitted it to Apple as such, but also wanted to see if I can find a workaround in the mean time.

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

The HTML outputs the phrase "The fish is large" in two separate fonts. To accentuate the issue, I've adding 10px of letter spacing between each character.

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中看到的输出：

This is what my output for the above looks like in Safari:

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

For testing purposes I added an HTML comment between the "f" and "i" characters and that seems to have worked:

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

得到如下输出：

img src =https://i.stack.imgur.com/W16r8.pngalt =HTML评论版本>

虽然这在技术上工作，真的是一个理想的解决方案，因为这里的内容实际上是由WYSIWYG编辑器生成的。

While that technically works, it's not really an ideal solution for me as the content here is actually being generated by a WYSIWYG editor.

似乎问题只在于f和i紧挨着。我不知道这些字母在Safari中有特殊的意义，但它是一个非常常见的字母顺序在英语语言，所以他们真的不应该有任何关键字这么小。

It seems the issue is only when "f" and "i" being right next to each other. I'm not sure if those letters have special meaning in Safari, but it's a pretty common letter sequence in the English language, so they really shouldn't have any keywords so small.

我也尝试添加：

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

这把s推到右边，但是f和i仍然聚在一起。

That did push the "s" over to the right, but the "f" and "i" were still bunched up together.

大写的F不会有同样的问题：

A capitalized "F" doesn't have the same problem:

在fi之后的字符似乎没有问题。我可以改变它的任何东西，它仍然有同样的问题。

And the character that follows the "fi", doesn't seem to matter. I can change it to anything else and it still has the same issue.

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

Also it does the same thing if "fi" appears mid-word:

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

I've confirmed that this issue also seems to exist on my iPhone 6 Plus running the latest version of Safari as well, so I doubt it's just something on my end.

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

To illustrate the issue I've created a jsfiddle with the necessary HTML and CSS that will hopefully reproduce the issue on your end. https://jsfiddle.net/38keruv7/4/

有没有人有任何想法的解决方法，不涉及要求我的客户端在他们的话中插入HTML意见在所见即所得的编辑器？

Does anybody have any ideas for a workaround that doesn't involve asking my clients to insert HTML comments in the middle of their words in a WYSIWYG editor?

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

I suppose I could scan and replace that particular combination prior to outputting the data, but that seems like a rather inefficient use of server resources, when dealing with much larger chunks of data.

推荐答案

看起来你发现了一个Safari错误。加入的fi是排版连字。 CSS3有 font-variant-ligatures 属性可用于控制它们; Safari通过 -webkit 前缀支持它。看起来像 -webkit-font-variant-ligatures：no-common-ligatures; 解决了这个问题，至少在Safari 8.0.3中：

It looks like you found a Safari bug. The joined "fi" is a typographic ligature. CSS3 has a font-variant-ligatures property that can be used to control them; Safari supports it with the -webkit prefix. It looks like -webkit-font-variant-ligatures: no-common-ligatures; solves the problem, at least in Safari 8.0.3:

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

这是一个更新的小提琴： https://jsfiddle.net/38keruv7/5/

Here's an updated fiddle: https://jsfiddle.net/38keruv7/5/

如果您仍遇到问题，问题，说 rendering：optimizeSpeed; 也解决了问题：在Safari中连接的字母

If you're still having trouble, here's a related question that says rendering: optimizeSpeed; also solves the problem: Letters Connected in Safari

这篇关于使用“f”时的Safari间距问题和“i”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！