css - 禁用字体连字 CSS(字母组合)

Question

现代浏览器会自动将一些字母(最常见的是“f”和“i”)组合成一个称为连字的字符。这通常会优化易读性(即更易于阅读)，但有时这可能不是设计师想要的。

就我个人而言，我只在 Chrome(版本 53.0.2785.101)中遇到过这个问题，虽然我不能确定，但​​我相信这个问题在所有其他版本的 Chrome 中仍然存在。

Chrome f 和 i 组合多次

边缘

IE11

在这种情况下，我正在寻找一种方法将其关闭。

Answer 1

事实证明，这绝对是可能的，只是需要进行一些挖掘。正如在 MDN, you can turn off common ligatures 中提到的:

font-feature-settings: "liga" 0;

然而，这是通过使用一个晦涩的 css 属性来完成的。相反，您应该使用 font-variant-ligatures，如下所示:

font-variant-ligatures: none;

这两个属性的作用完全相同，但是，推荐使用后一个。

MDN:

Note: Whenever possible, Web authors should use the font-variant shorthand property or an associated longhand property, font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric or font-variant-position.

This property is a low-level feature designed to handle special cases where no other way to enable or access an OpenType font feature exists.

In particular, this CSS property shouldn't be used to enable small caps.