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

Question

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

铬 61

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

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

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

这是它在 Firefox 56 上的样子：

Answer 1

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

尝试添加：

font-variant-ligatures: none;

到你的段落元素。

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

对于您想要控制字符间距的问题，并且您的源文本像“truffle shuffle”一样由单独的 F 和 L 字符组成，这将阻止浏览器生成连字并应用您可能期望的间距。

---

但是，这不是您在网站中遇到的唯一问题！

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

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

这些连字字符不包含在网络字体中 - 拉丁连字位于 U+FB00-FB06 并且字体或 Google 的字体 API 不包含它们。 因此，他们正在切换到备用字体，在这种情况下，它被指定为通用 sans-serif - 可能是 Arial 或 Helvetica。 它们本身并不大胆，但它们比 Fira Sans 重。