CSS：在所有浏览器中禁用字体连字

Posted 2023-03-15

【中文标题】CSS：在所有浏览器中禁用字体连字

【英文标题】：CSS: Disable font ligatures in all browsers

【发布时间】：2016-12-19 22:49:02

【问题描述】：

由于谷歌字体在中国被屏蔽，我不得不下载它们并使用 FontSquirrel 进行转换。

问题：fi/ff/etc 很丑

我在Prevent ligatures in Safari (Mavericks/ios7) via CSS 完成了所有步骤，但没有雪茄。

如何一次禁用连字？ -webkit-font-variant-ligatures: no-common-ligatures; 没用

【问题讨论】：

谷歌字体在中国被屏蔽了！哇！！感谢您指出了这一点。很有用。我知道谷歌 jQuery CDN 在中国被屏蔽了，这就是我使用 jquery.com CDN 的原因，但我没有连接到谷歌字体。再次感谢。 （抱歉，我没有回答您的问题。）

目前，Safari 开发者工具将-webkit-font-variant-ligatures 显示为无效的 CSS 选择器。它将font-variant-ligatures 识别为有效的选择器，正如Andreas 提供的那样，但不接受它。

【参考方案1】：

与andreas 提供的答案基本相同，但这里是完整的 CSS 以便于参考：

* 
  font-variant-ligatures: none;

【参考方案2】：

尽管有no-common-ligatures，您仍可以尝试none、unset 或no-contextual 之类的值。 See MDN 用于所有可能的值。

例如：

:root 
  font-variant-ligatures: none;

在所有现代浏览器中也是should be supported。

【讨论】：

在 macOS 11.6 上的 Safari 15.0 16612.1.29.41.4, 16612) 中失败。开发人员工具将font-variant-ligatures: none 显示为有效且已应用，但切换规则无效。字体系列“Consolas”、SFMono-Regular、Menlo、“Droid Sans Mono”、等宽字体。

@SJT 你试过-webkit-前缀吗？是否是相同的行为（抱歉，我目前没有任何 Safari 可供测试）？

是的，请参阅我对 OP 的评论。

【参考方案3】：

在 Safari 中看到 font-variant-ligatures 没有效果（请参阅上面已接受答案的评论）已使用

font-feature-settings: "liga" 0;

Safari 和 Chrome 都在尊重这一点。