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

Question

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

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

铬 f和i组合多次

边缘

IE11

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

Answer 1

事实证明,这绝对是可能的,它只需要一些挖掘.如MDN所述,您可以关闭常见的连字:

font-feature-settings: "liga" 0;

然而,这是通过使用不明显的css属性来完成的.相反,您应该使用font-variant-ligatures,如下所示:

font-variant-ligatures: none;

这两个属性完全相同,但后者推荐使用.

MDN:

注意:Web作者应尽可能使用font-variant速记属性或关联的longhand属性,font-variant-ligatures,font-variant-caps,font-variant-east-asian,font-variant-alternates,font-variant -numeric或font-variant-position.

此属性是一个低级功能,旨在处理特殊情况,其中不存在启用或访问OpenType字体功能的其他方法.

特别是,此CSS属性不应用于启用小型大写字母.

Answer 2

我遇到了类似的问题，并被谷歌引导到这里。我不想在任何网页上出现连字。（当我将网页打印为 PDF 并使用 PDF 阅读器上的文本转语音引擎时，它会跳过连字。）这是一种适合我的解决方案：

在 Chrome/linux 上打开网页（也可以在其他桌面操作系统上运行）。安装 Google Chrome 的 StyleBot 扩展。然后，在其选项中，单击“样式”，然后单击“编辑全局样式表”。输入以下内容（基于@AwesomeGuy 的答案）。

body {
font-variant-ligatures: none;
font-feature-settings: "liga" 0;
}

单击“启用全局样式表”。瞧，Chrome 似乎再也不会渲染连字（它单独渲染字符）。另外，当我要求 Chrome 将网页打印为 PDF 时，字符会单独呈现。