非inline状态下span元素如何保留font-kerning？

当每个字母被inline-block的span包裹时，字体的字距调整（font-kerning）会失效，本质是因为inline-block元素之间的空白间距替代了字符原生的字距关系。以下是几种可行的解决方法：

方法一：负外边距抵消间距+强制字距优化 #

给包裹字母的span设置负外边距抵消元素间的空白，同时开启字体的字距优化特性：

.letter {
  display: inline-block;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  margin: 0 -0.03em; /* 根据使用的字体微调数值 */
}

负外边距的数值需要根据你使用的具体字体调整，直到视觉上和原文字的字距完全匹配。

方法二：用CSS Grid实现无间距排列 #

将包含所有字母span的父元素设为Grid布局，让字母自动紧密排列，同时保留字距：

.word-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, max-content);
}
.letter {
  font-kerning: normal;
  text-rendering: optimizeLegibility;
}

Grid布局下的子元素默认没有额外间距，能完美继承字体原生的字距，同时每个span可以正常应用transform效果。

方法三：仅位移场景用relative定位 #

如果只需要实现位移类的变换（如上下左右移动），可以保持span为inline元素，通过position: relative实现位移，这样不会破坏字距：

.letter {
  display: inline;
  position: relative;
}
.letter:hover {
  top: -2px; /* 示例：hover时向上移动 */
}

注意这种方法仅适用于位移，旋转、缩放等复杂transform仍需使用前两种方法。

内容的提问来源于stack exchange，提问作者Michaël