连字和紧缩对使您的网页更清晰

For many web designers, CSS webfonts have enough richness and variability to occupy their time. A good developer will carefully deliberate in choosing a strong font family and designing a decent font stack. They will certainly modify font-size, line-height and color to maximize attractiveness and readability of text, and maybe add a little letter-spacing for heading elements, but that’s usually as far as it goes.

对于许多Web设计人员而言， CSS Webfonts具有足够的丰富性和可变性以占用其时间。 一个好的开发人员会仔细地考虑选择一个强大的字体系列并设计一个不错的字体堆栈 。 他们当然会修改font-size ， line-height和color以最大程度地提高文本的吸引力和可读性，并可能为标题元素添加一些letter-spacing ，但这通常是可行的。

A well-designed typeface has more depth to it than most people appreciate. One example of this buried richness are automatic kerning controls: some letters that appear beside each other become much more readable if they are moved closer together. These are known as kerning pairs. In some cases, the letters might be conjoined into a new set of characters, called a ligature.

精心设计的字体比大多数人更欣赏深度。 这种隐藏的丰富度的一个示例是自动字距调整控件：如果将彼此靠近的话，一些彼此并排出现的字母将变得更具可读性。 这些被称为紧缩对 。 在某些情况下，字母可能会组合成一组称为连字的新字符 。

Text with kerning pairs (bottom)

带字距调整对的文本(底部)

A good example would be the capital letters W and A. Kerned like every other letter, they appear too far apart in many typefaces: the A should, in most cases, slip in closer under the trailing stroke of the W.

一个很好的例子是大写字母W和A。像其他字母一样紧缩，它们在许多字体中显得相距太远：在大多数情况下，A应该在W的尾随下更近一些。

A correctly applied kerning pair effect is subtle, but effective, greatly increasing readability while allowing more glyphs per line of text.

正确应用字距对效果是微妙的，但有效，大大提高了可读性，同时每行文本允许更多字形。

Another example would be the lowercase letters f and i: in many cases, the period on the i will display on top of or very close to of the overhang of the f, causing a visual “splotch” on the page. This can be changed into a ligature:

另一个示例是小写字母f和i ：在许多情况下， i上的句点将显示在f的突出位置的顶部或非常接近，从而在页面上引起视觉“斑点”。 可以将其更改为连字：

Text with automatic ligature font substitution (bottom)

具有自动连字字体替换的文本(底部)

It is important to understand that these adaptations are built directly into the font: all we need to do is gain access to them. Traditionally, ligatures were created by inserting HTML entities, but in modern browsers it is much easier to turn on the appropriate CSS property.

重要的是要了解这些改编直接内置在字体中：我们需要做的就是获得对它们的访问。 传统上，连字是通过插入HTML实体创建的，但是在现代浏览器中，打开适当CSS属性要容易得多。

In Firefox and Safari, kerning pairs and ligatures are on by default; in Firefox, they are automatically engaged if the font is above 20 pixels in size.

在Firefox和Safari中，字距调整对和连字默认情况下处于启用状态； 在Firefox中，如果字体大小超过20像素，则会自动启用它们。

CSS offers many controls for kerning, but the easiest and fastest is very simple:

CSS提供了许多用于字距调整的控件，但是最简单，最快的方法非常简单：

body {
	text-rendering: optimizeLegibility;
}

The text-rendering property is supported in all current versions of Firefox, Safari and Chrome, and automatically substitutes kerned pairs and ligatures as appropriate throughout your selection. However, is non-standard, brought into CSS from SVG, and one that has known rendering bugs in Chrome. Browsers should be using two seperate properties to achieve the same results: font-kerning and font-variant-ligatures. Practically, these properties are a little more complex, as they are currently supported with various vendor prefixes and different value interpretations.

Firefox，Safari和Chrome的所有当前版本均支持text-rendering属性，并且在整个选择过程中，将适当地自动替换紧缩对和连字。 但是 ，是非标准的 ，是从SVG引入CSS的，并且在Chrome中已知渲染错误。 浏览器应使用两个单独的属性来获得相同的结果： font-kerning和font-variant-ligatures 。 实际上，这些属性要稍微复杂一些，因为它们目前受各种供应商前缀和不同值解释的支持。

To turn on standard ligatures, use:

要打开标准连字，请使用：

p {
	font-variant-ligatures: common-ligatures;
}

To gain support in modern browsers:

在现代浏览器中获得支持：

p {
	-webkit-font-variant-ligatures: common-ligatures;
	/* for iOS and Safari 6 */
font-variant-ligatures: common-ligatures; /* for up-to-date browsers, including IE10 and Opera 21 */
}

For kerning:

对于字距调整：

p {
	-webkit-font-feature-settings: "kern";
	font-feature-settings: "kern";
	font-kerning: normal;
}

结论 (Conclusion)

Kerning and ligatures are near-perfect examples of progressive enhancement: users with browsers that do not support the property will still be able to read the text, just without the subtle advantages of advanced CSS typography.

紧缩和连字是渐进增强的近乎完美的示例：使用不支持该属性的浏览器的用户仍然可以阅读文本，只是没有高级CSS 字体的细微优点。

翻译自: https://thenewcode.com/547/Make-Your-Web-Pages-More-Legible-With-Ligatures-and-Kerning-Pairs