4

过去我曾在一些@font-face webfonts 上遇到过这种情况。我最近下载了免费的Museo Sans 500 webfont,但在某些字母间距正确时遇到了一些问题,特别是字母 f。调整 CSSletter-spacing属性时,只要有“f”,它就不会再次应用字母间距,直到“f”后面的第二个字母。

例如:

在此处输入图像描述

或者另一个使用单词的例子:

在此处输入图像描述

无论如何,我遇到了这个也使用该字体的网站,但是当弄乱他们网站上的文本和字母间距时,它没有任何问题

在此处输入图像描述

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

我试过弄乱我知道的每一个 css 字体属性,但似乎没有一个能解决这个问题。

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 解决这个问题的任何建议,还是我必须与字体本身有关>

4

1 回答 1

11

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

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

于 2016-11-10T09:09:25.440 回答