CSS中的font-kerning属性详解

描述
font-kerning属性用于控制字体中字符对的字距调整（kerning）。字距调整是排版学中的一项技术，通过调整特定字符对之间的间距来改善视觉外观。例如，在大写字母"A"和"V"相邻时（如"AV"），适当的字距调整会让"A"的右伸部分和"V"的左伸部分略微重叠，避免出现过大间隙。

字体中的字距调整信息

1. 高质量字体通常包含字距调整表（kerning table），存储了需要特殊间距调整的字符对
2. 这些调整值可以是正值（增加间距）或负值（减少间距）
3. 字距调整主要影响以下字符组合：
   • 斜线字符：A, V, W, Y等
   • 标点符号与字母的组合

属性值详解
font-kerning接受三个值：

1. auto（默认值）

   • 浏览器决定是否应用字距调整
   • 通常会在字体支持且文本尺寸足够大时启用
   • 小字号文本可能禁用字距调整以保持可读性

2. normal

   • 强制启用字距调整
   • 使用字体内置的字距调整表
   • 无论文本大小如何都会应用

3. none

   • 完全禁用字距调整
   • 所有字符都使用标准间距
   • 适用于需要精确控制间距的场景

应用场景与示例

/* 启用字距调整 - 改善排版质量 */
.headline {
  font-kerning: normal;
  font-size: 2rem;
  font-family: "Georgia", serif;
}

/* 禁用字距调整 - 保持间距一致性 */
.code-sample {
  font-kerning: none;
  font-family: monospace;
}

/* 由浏览器决定 - 平衡可读性与美观 */
.body-text {
  font-kerning: auto;
  font-size: 1rem;
}

实际效果对比
观察"AVA"这个单词：

• font-kerning: normal时，A和V之间的间距会略微减小
• font-kerning: none时，所有字符间距均匀
• 差异在放大显示时更加明显

浏览器处理细节

1. 字体必须包含字距调整信息，否则该属性无效
2. 对于不支持OpenType特性的旧字体，浏览器可能无法应用字距调整
3. 某些浏览器对auto值的处理策略不同：
   • 可能基于字体大小、语言或渲染引擎的启发式算法

与其他属性的关系

1. 与letter-spacing：字距调整在字母间距基础上应用
2. 与font-feature-settings：可以通过kern特性更精细地控制
3. 与文本渲染：text-rendering: optimizeLegibility通常会自动启用字距调整

最佳实践建议

1. 大标题使用normal值以获得最佳视觉效果
2. 代码或等宽字体使用none保持一致性
3. 正文文本使用auto让浏览器优化可读性
4. 测试不同字体和大小下的渲染效果

兼容性说明
现代浏览器普遍支持该属性，但对于较旧字体或特殊书写系统，实际效果可能因字体文件和浏览器实现而异。