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

现代浏览器会自动将一些字母组​​合在一起,最常见的是“f”和“i”,这些字母称为连字.这通常可以优化易读性(即更容易阅读),但有时这可能不是设计师想要的.

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

铬

f和i组合多次

边缘

IE11

在这种情况下,我一直在寻找一种方法来关闭它.

事实证明,这绝对是可能的,它只需要一些挖掘.如 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.