网页设置负letter-spacing时如何保留字体连字？

当设置letter-spacing为负值时，浏览器会优先对单个字符应用间距调整，这会破坏原本的连字字形替换——因为连字是将多个字符合并为单个字形，而字符级的间距调整需要拆分这些合并的字形才能生效，这就是连字失效的核心原因。

以下是几种可行的解决方法：

• 明确指定字体连字特性
  虽然你已经配置了font-variant-ligatures: common-ligatures;，但直接通过font-feature-settings明确指定具体连字类型，有时能强制浏览器优先处理连字：

  font-feature-settings: "liga" 1, "clig" 1, "ffi" 1, "ffl" 1;
  

  其中"liga"对应普通连字，"clig"为上下文连字，"ffi"和"ffl"是你遇到的特定连字组合，明确指定能提升浏览器对这些字形的渲染优先级。

• 启用排版优化渲染
  添加text-rendering: optimizeLegibility;属性，让浏览器优先以排版质量为目标渲染文本，这会让浏览器在处理letter-spacing时优先保留连字：

  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures;
  letter-spacing: -0.01em;
  

  该属性在现代浏览器中已做性能优化，无需担心过度消耗资源。

• 使用字体原生字距调整特性
  若上述方法无效，可尝试使用字体自带的字距调整（Tracking）特性，部分专业字体支持通过font-feature-settings在字形级别调整整体间距，不会破坏连字：

  font-feature-settings: "track" -1; /* 具体数值需参考字体官方文档 */
  

  这种方式是直接对字形而非单个字符调整间距，和桌面出版软件的逻辑更接近。

• 局部包裹连字内容
  将需要保留连字的文本片段用<span>单独包裹，给该span设置letter-spacing: normal;，父元素仍保留负字间距，适合局部文本需要连字的场景：

  <p style="letter-spacing: -0.01em;">
    普通文本 <span style="letter-spacing: normal; font-feature-settings: 'ffi' 1;">ffitest</span> 普通文本
  </p>
  

不同浏览器的渲染引擎对连字和letter-spacing的处理逻辑略有差异，建议在目标浏览器中测试上述方案的实际效果。

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