为什么字母间距并不总是适用于所有字母?

Why does letter spacing not always work with all letters?

我过去曾在某些@font-face 网络字体中遇到过这种情况。我最近下载了免费的 Museo Sans 500 webfont,但是 运行 遇到了某些字母间距不正确的问题,特别是字母 f。调整 CSS letter-spacing 属性 时,只要有 "f",它就不会再次应用字母间距,直到 "f" 之后的第二个字母。

例如:

或使用单词的另一个示例:

无论如何,我发现 this site 也使用该字体,但是当弄乱他们网站上的文本和字母间距时 它没有任何问题.

我以前从未创建或编辑过字体,所以我不确定这是否与编辑字体本身有关,或者它是否与@font-face 以及可能是我可以修复的问题有关css.

我试过弄乱我知道的每一种 css 字体 属性,但其中 none 似乎解决了这个问题。

font-variant-ligatures:
font-kerning: 
letter-spacing:     
text-rendering: 
font-feature-settings: 
font-kerning: 
-webkit-font-smoothing: 
text-size-adjust:
font-size:

我遇到了一个非常漂亮的插件,kerning.js 我可以用它来临时解决这个问题,但是对于一个字母来说似乎有点过分了,特别是因为它在其他网站上似乎工作正常,比如我之前链接的那个。关于如何使用 CSS 解决此问题的任何建议,或者我必须与字体本身做的事情>

发生这种情况是因为您的 Museo 版本包含连字,而 Typekit 在其他站点上提供的版本不包含连字。字母 "ffi" 彼此靠得很近的原因是因为它是连字 — 三个字母中的一个 "drawing",而不是三个单独的字母。现代浏览器默认打开这些。

您应该可以使用 font-feature-settings: "liga" 0; 关闭连字,或者如果您完全不使用它们,一个更简单的解决方案是使用不带连字的 Museo 版本。