禁用字体连字CSS（字母组合） [英] Disabling font ligatures CSS (letter combining)

问题描述

现代浏览器会自动将一些字母（通常是f和i）结合到一个称为连字的单个字符中。这通常会优化易读性（即易于阅读），但有时这可能不是设计者想要的。我个人的问题只出现在 Chrome （版本53.0.2785.101），虽然我无法确定，但我相信此问题在所有其他版本的Chrome中仍然存在。
$ b

Chrome < /强>

<强> IE11

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

解决方案

事实证明，这绝对是可能的，它只是需要一些挖掘。作为 MDN提到的，可以关闭共同连字的：

  font-feature-settings：liga0; 
  

然而，这是通过使用不明确的css属性来完成的。相反，您应该使用 font-variant-ligatures ，如下所示：

  font-variant-ligatures：none; 
  

这两个属性完全相同，不过，推荐使用后者。

MDN： b
$ b

注意：Web作者应尽可能使用字体变体速记属性或相关的longhand属性，font-variant-ligatures，font-variant-caps，font-variant-east-asian，font-variant-alternates，font-variant-numeric或font-variant-position。 b
$ b

这个属性是一个低级特性，用于处理特殊情况，在这种情况下，不存在其他方式来启用或访问OpenType字体特性。

<特别是，这个CSS属性不应该用来启用小型大写字母。

Modern browsers automatically combine some letters, most commonly 'f' and 'i' to one single character called a ligature. This often optimizes legibility (i.e. easier to read), however sometimes this might not be what a designer wants.

Personally, I had this issue only in Chrome (Version 53.0.2785.101), I, although I cannot be sure, I believe this issue persists in all other versions of Chrome.

Chrome f and i is combined multiple times

Edge

IE11

In this case I was looking for a way to turn it off.

解决方案

As it turns out, it's definitely possible, it just required some digging. As mentioned on MDN, you can turn off common ligatures:

font-feature-settings: "liga" 0;

This, however, is done by using an obscure css property. Instead, you should use font-variant-ligatures, like so:

font-variant-ligatures: none;

These two properties does the exact same thing, however, the latter one is recommended one.

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.

这篇关于禁用字体连字CSS（字母组合）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！