Safari浏览器中字母包裹span后字体字距（kerning）失效求助

问题本质：当每个字母被<span>单独包裹后，Safari会将每个span视为独立的文本单元，默认不会跨元素应用字体的字距（kerning）特性——这和Chrome等浏览器的处理逻辑不同，后者会尝试保留连续文本流的排版特性。

可行的解决方法 #

1. 手动设置letter-spacing模拟字距

先通过字体工具（如FontForge）或在线字距查询工具，获取目标字体中对应字母对的 kern 数值，然后为相邻span设置负的letter-spacing来模拟原生字距：

/* 根据你的字体实际调整数值，示例为通用值 */
h1 span + span {
  letter-spacing: -0.015em;
}

这种方法适合固定短文本，调整成本低。

2. 强制保持文本流连续性

通过CSS让浏览器将多个span识别为连续文本流的一部分：

h1 {
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: normal;
}

h1 span {
  display: inline; /* 保持行内元素特性，不要用inline-block */
  letter-spacing: inherit;
}

关键是让span保持inline状态，不要破坏文本流的连续性，同时强制启用字体的排版特性。

3. JS动态计算间距（适合动态内容）

如果文本是动态生成的，可以通过对比原文本和span包裹后文本的宽度，自动调整间距：

const original = document.querySelector('h1:first-child');
const wrapped = document.querySelector('h1:last-child');
const originalWidth = original.offsetWidth;
const wrappedWidth = wrapped.offsetWidth;
// 计算每个字母间需要调整的间距
const gap = (originalWidth - wrappedWidth) / (wrapped.children.length - 1);

// 给每个后续span设置margin-left
Array.from(wrapped.children).forEach((span, i) => {
  if (i > 0) span.style.marginLeft = `${gap}px`;
});

这种方法能自动适配不同字体和文本内容，无需手动调整数值。

为什么之前的CSS无效？ #

font-kerning、font-feature-settings: 'kern'这类属性仅作用于连续的文本节点，当字母被span分割成独立元素后，Safari不会跨元素应用这些排版规则，所以这些属性无法生效。

内容的提问来源于stack exchange，提问作者l4isol