1. 什么是CSS font-kerning属性？
CSS font-kerning属性是用于控制字符间距的一种CSS3新特性。当我们在文本中使用字体的时候，同一行字体中的字符间有时候会因为字形的不同而导致间距过大或过小，这就需要使用CSS font-kerning属性进行控制。
字距对于视觉呈现至关重要，它对于调整字符之间的空间以使其看起来更平滑和整洁，是很有用的。元素的字距必须相同，否则会导致视觉上的不均匀和不协调。而CSS font-kerning属性就可以解决这个问题。
1.1 font-kerning的属性值
CSS font-kerning属性有以下属性值：
auto: 表示使用字体默认的字距。如果字体本身具有字距控制信息，则使用该字距控制信息。
normal: 表示禁用字距控制，使用标准字距。这是默认值。
none: 表示禁用字距控制，使用零字距。
1.2 font-kerning的浏览器支持情况
div {
font-kerning: auto; /* 以自定义值设置font-kerning */
font-feature-settings: "kern"; /* 新语法, 参见下文 */
}
p {
-webkit-font-kerning: auto; /* Safari 支持的旧语法 */
}
从上面的代码中可以看出CSS font-kerning属性目前只有Chrome，Firefox，Safari和Opera浏览器支持，在IE浏览器中并不支持。
2. font-kerning属性的实例和用法
CSS font-kerning属性可以为文本字距设置以下值：
auto: 以自定义值设置font-kerning。
normal: 让字距保持标准缩进。
none: 不应该应用额外的字距。用于工作中的大型标题之类的字形（例如，卡片标题或大摘要）时特别有用。
2.1 font-kerning属性的基本使用
/* 匹配所有的元素 */
*:not(script)::before,
*:not(script)::after {
font-kerning: normal;
}
在上面的样式代码中，当设置font-kerning为normal时，使用标准缩进让字距保持标准。这是前提。还有一些字体在字形设计上会有调整字符间距的特别处理，那么对于这些特殊的字形设计，我们就可以设置font-kerning为auto。
2.2 font-kerning属性的细节
了解font-kerning属性的一些细节，对于掌握这个属性的使用和含义非常有用。要记住的是：
如果CSS font-kerning属性值为auto，它会使用字体的默认字距控制信息，如果字体本身不具备字距控制信息，则它会将其设置为normal。
font-kerning属性不会产生额外的字距，它只是应用原始字距的负值或零值。
2.3 font-kerning属性的应用场景
.header-text[data-kerning="on"] {
font-kerning: normal;
}
.header-text[data-kerning="off"] {
font-kerning: none;
}
在上面的代码中，假设你有一项选择让用户选择在标题栏中启用或禁用字距控制。在此样式中，.header-text[data-kerning=”on”] 元素使font-kerning为normal，而 .header-text[data-kerning=”off”]则使font-kerning为none。