CSS秘密花园：连体字母_html/css

和人一样，不是所有的字形放在一起的时候都可以显得很自然。例如，对于大多数衬线字体的 f 和 i 而言。字母 i 上边的小点经常和 f 中的横线重叠，使得它们的组合看起来非常笨拙。

为了解决这个问题，类型设计师经常会在他们的字体中添加额外的字符，称为连字符。这些都是单独设计的字形的二联体或三联体，用于排版方案中当对应的字符彼此相邻时。例如，如上图中的一些常见的连体字母，它们看起来比之前对应字符单独放在一起的时候好了很多。

还有一些所谓的自由连体字“discretionary ligatures”：

事实上，对于不起眼的 & 符号，我们都知道并且喜欢把它作为字母 e 和字母 t 的连写(“et”在拉丁文中表示“and”)。

它被设计成一个另类的风格，而不是因为它们的等价字符对相邻时出了问题。

但是，浏览器从来不会默认使用自由连体字（尽管这是正确的），并往往不会使用常见的连字体（这是一个bug）。事实上，直到最近，显式使用任何连写字的唯一方法就是使用它的等效Unicode字符——如， fi 表示 fi 连写。这种方法比解决问题带来了更大的麻烦：

所以，在这种时候，总需要一个更好的方法，对吧？

解决方案

在 CSS3 的中， font-variant 可以被转换成 shorthand ，包含了很多新的 longhand 属性。其中之一是 font-variant-ligatures ，特别为连写的开启和关闭而设计的。要打开所有可能的连写字，你需要使用三个标识符：

font-variant-ligatures: common-ligatures discretionary-ligatures historical-ligatures;

该属性是可继承的。你可能会发现自由连体字“discretionary ligatures”妨碍可读性，想要把它们关掉。在这种情况下，你可能希望只打开常用的连写字：

font-variant-ligatures: common-ligatures;

你甚至可以明确地把其它两种连写字关闭：

font-variant-ligatures: common-ligatures no-discretionary-ligatures no-historical-ligatures;

font-variant-ligatures 还接受 none 值，就是完全把连写字关闭。不要使用 none 值，除非你知道自己设置的是什么。要把 font-variant-ligatures 重置为初始值，你需要使用 normal ，而不是 none 。