Adobe InDesign、Illustrator 等设计工具中的光学字偶距（Optical Kerning）与度量字偶距（Metrics Kerning）有着本质区别。度量字偶距直接读取字体文件 GPOS 表中由设计师预设的字符对调整值，例如 AV、To、Yo 这些组合在默认情况下会获得额外收紧；光学字偶距则完全绕开这些预设值，依据相邻字符的实际轮廓、留白面积和视觉重心重新计算间距。CSS 与浏览器排版引擎目前还没有暴露 Adobe 光学字偶距所依赖的轮廓分析接口，因此网页文本的默认行为更接近度量字偶距，想要在 Web 上获得同等效果，需要先厘清 CSS 已有属性的能力边界。
度量字偶距与光学字偶距的核心差异
度量字偶距的可靠性和一致性来自字体内部的 OpenType GPOS 表。设计师在绘制字体时会为容易产生视觉空隙的字符对写入 kern 数据，浏览器在排版时查询这些数据并应用间距调整。像 Times New Roman、Source Serif 等正文字体通常拥有数百到上千个 kern pairs，但它们的覆盖范围仍然有限，尤其在大字号展示场景下，未定义的字偶距容易显得松散或拥挤。
光学字偶距不依赖这些预设对表，而是对字符边界框、投影面积和相邻空间进行几何分析。Adobe 的实现会计算字符之间的距离并根据字形形状做平滑优化，因此即使字体设计师没有为某个字符对预设 kern 值，光学字偶距也能给出相对均匀的间距。它的优势体现在标题、海报、包装等大字号场景，通常比度量字偶距更加自然；但缺点是不够稳定，不同工具的计算结果可能存在差异，并且在小字号正文中过度调整反而会降低可读性。
理解这一差异很重要，因为 CSS 中的 font-kerning 和 font-feature-settings 都属于度量字偶距的范畴，它们只是控制是否启用字体自带的 kern 数据，而不是在浏览器里执行光学分析算法。如果抱着“开启某个 CSS 属性就等于 Adobe 光学字偶距”的预期，很容易在跨浏览器测试时发现效果并不一致。
CSS 现有属性能控制到什么程度
font-kerning 是现代 CSS 中最直接的字偶距开关。它接受 auto、normal 和 none 三个值，其中 auto 由浏览器决定是否应用字偶距，normal 要求启用字体内的 kern 数据，none 则完全关闭字偶距。该属性的作用是读取 GPOS 表，而不是重新计算字符间距，因此无论选择哪个值，都无法突破字体本身预设信息的限制。
p {
font-kerning: normal;
}
.title {
font-kerning: none;
}
如果希望更细粒度地控制 OpenType 特性，可以使用 font-feature-settings。它允许同时指定多个特性标签，例如打开字偶距、关闭连字，或打开小型大写字母。写法上需要注意，特性值以字符串形式出现，代码示例如下：
.heading {
font-feature-settings: "kern" 1, "liga" 0, "cpsp" 1;
font-kerning: normal;
}
这里 "kern" 1 表示启用字体内的字偶距数据，"liga" 0 表示关闭标准连字，"cpsp" 1 表示开启大写字母间距。它们都依赖字体是否包含对应特性。对于没有内置 kern 数据的字体，这些声明不会产生任何视觉效果。另一个容易混淆的属性是 letter-spacing，它确实可以直接增加或减少字符间距，但它是全局均等的，作用于所有字符对，无法像光学字偶距那样根据相邻字形逐个微调。
font-optical-sizing 也经常被误认为与光学字偶距有关，但它的含义不同。该属性对应可变字体中的 opsz 轴，用于在不同字号下切换更适合阅读的字形轮廓、笔画对比度和字怀宽度。它可以改善大字号标题的视觉均匀性，但不会执行字符对级别的间距分析。若可变字体同时提供 opsz 轴和 GPOS 字偶距数据，两者可以叠加使用，却仍不等同于 Adobe 的光学字偶距算法。
能否用 CSS 等效实现 Adobe 光学字偶距
从浏览器排版机制看，目前无法仅靠 CSS 属性等效实现 Adobe 光学字偶距。原因是光学字偶距需要对字形轮廓做几何分析，而 CSS 的作用范围是样式层，它无法读取当前字体中每个字符的路径数据。即使 font-feature-settings 能控制 GPOS 特性，也不能让浏览器切换到一套轮廓分析引擎。
可变字体提供了一个间接的改善路径。通过 font-optical-sizing: auto 或显式设置 font-variation-settings: "opsz" 72，浏览器会选择为大字号优化的字形版本，视觉反差和笔画间距更接近设计师的光学调整意图。但这里的“光学”针对的是字形本身，而不是字符对之间的 metric 调整。对于中文、日文等字符宽度相对固定的文字系统，这种视觉尺寸调整的收益通常更大，而拉丁字母则仍可能出现局部字距不匀。
h1 {
font-family: "Newsreader", serif;
font-optical-sizing: auto;
}
.poster-title {
font-variation-settings: "opsz" 144;
}
要实现更接近光学字偶距的效果，需要借助 JavaScript 测量文本。Canvas 的 measureText 方法可以获取字符宽度，但浏览器返回的宽度通常包含字偶距和默认 side bearing，因此可以通过比较相邻字符对与单个字符宽度之和的差值，估算当前字体是否已经应用了 kern 调整，并据此补充修正。下面是一个基础测量函数：
function getPairAdjustments(text, font) {
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
ctx.font = font;
const result = [];
for (let i = 0; i < text.length - 1; i++) {
const pairWidth = ctx.measureText(text[i] + text[i + 1]).width;
const singleWidth = ctx.measureText(text[i]).width + ctx.measureText(text[i + 1]).width;
result.push(singleWidth - pairWidth);
}
return result;
}
const text = 'AVATAR To Yo';
const adjustments = getPairAdjustments(text, '72px Arial');
console.log(adjustments);
这个思路只是基于度量的二次修正，并不包含 Adobe 光学字偶距所使用的轮廓形状分析。组件库或海报生成工具可以在测量结果基础上，对重点字符对使用 letter-spacing 或行内元素偏移，逐步接近设计预期。若需要真正的轮廓级算法，还可以使用 OpenType 解析库读取字形路径并计算轮廓间距，但实现成本明显更高，通常只适合专门的排版引擎。
工程中的替代方案与实用建议
对于大多数 Web 项目，不必追求完全复刻 Adobe 光学字偶距。正文场景优先依赖字体自带度量字偶距已经足够，保持 font-kerning: normal，并选择字偶距数据完善的字体，能获得可靠的阅读体验。真正需要额外处理的是大字号标题、品牌海报、活动页首屏等视觉敏感区域。
在这些场景中，可以先用 font-optical-sizing: auto 让可变字体切换视觉尺寸，再通过测量或人工审视找出明显不匀的字符对。对于少量标题，手动使用 letter-spacing 或 margin 微调往往比引入整套测量工具更简单。例如某些标题中 “To” 偏松、“AV” 偏紧，可以只针对这两处加一个工具类，不必改变正文排版。
如果项目中有大量动态生成的标题，可考虑编写一个轻量排版函数：先渲染到隐藏容器，测量字符宽度并估算相邻字符对是否需要补偿，再输出带有行内偏移标记的 HTML。这类方案会牺牲一部分性能，但可以带来设计上的一致性。需要特别注意的是，行内元素包裹字符时不要破坏选择、复制和响应式换行行为，通常只适合短标题而非长篇内容。
最终，CSS 确实无法等效实现 Adobe 光学字偶距的完整算法，但理解 font-kerning、font-feature-settings 和 font-optical-sizing 的边界，已经能解决多数网页排版问题。若项目对光学间距有极致要求，更合理的路径是借助 Canvas、SVG 或服务端排版引擎进行文本渲染，而不是期待浏览器在短期内提供与设计工具完全一致的光学字偶距接口。
CSS光学字偶距font-kerningfont-feature-settings修改时间：2026-09-22 08:00:32