Fira sans 看起来不一致 fi 和 fl 没有分开,看起来更大胆

Fira sans not looking consistent fi and fl are not separated and look bolder

目的是去掉文中的fl和fi的粗体字

chrome61

我能够在此代码笔中重现该问题:

https://codepen.io/jossnaz/pen/vWgEGB

基本上 fira sans 没有对字符应用任何 letter-spacing,它们的字符是粗体。不知道为什么。

这是它在 firefox 56 上的样子:

有一个 CSS 属性旨在控制浏览器自动生成连字的方式。

尝试添加:

font-variant-ligatures: none;

到您的段落元素。

查看此代码笔:https://codepen.io/jossnaz/pen/vWgEGB

对于您想要控制字符间距的问题,并且您的源文本的组成类似于 "truffle shuffle",具有单独的 F 和 L 字符,这将阻止浏览器生成连字并像您一样应用间距大概期待吧。


但是,这不是您 运行 在您的站点中遇到的唯一问题!

在您的页面中,文本实际上使用了 Unicode fifl 连字(U+FB01 和 U+FB02) .浏览器不会将它们分离回单独的字符,它们 包含在 Google 字体 API 中。这可能是您的 CMS 中的某个插件自动转换连字,或者可能是从编辑器中复制和粘贴的结果。

有关此示例,请参阅:https://codepen.io/anon/pen/mqmLLZ

这些连字字符未包含在网络字体中 - 拉丁连字位于 U+FB00-FB06,字体或 Google 的字体 API 不包含它们。 因此,他们正在切换到备用字体,在本例中指定为通用 sans-serif - 可能是 Arial 或 Helvetica。 它们本身不是粗体,但比 Fira Sans 更重。