如何避免标题元素水平错位？字母左侧留白偏移问题咨询

这个问题我之前也碰到过！本质上是字体的**侧轴承（side bearing）**在不同字号下的视觉差异搞的鬼——标题字体更大，首字母左侧的留白（也就是字体设计里自带的左侧空隙）被放大后，就显得和段落明显偏移了。除了手动调padding，还有这几个实用办法：

1. 负文本缩进（text-indent） #

用负的text-indent抵消首字母的左侧留白，推荐用em单位适配字体大小，这样缩放字号时不用重复调整：

h1 {
  text-indent: -0.1em; /* 数值根据你的字体微调，0.05em到0.2em之间试 */
}

这个方法不会破坏盒模型，只是调整文本的起始位置，适配性很强。

2. 调整字体字距特性 #

有些字体的侧轴承是由字距（kerning）控制的，可以尝试关闭字距优化来减少留白差异：

h1 {
  font-kerning: none;
  /* 或者针对OpenType字体关闭kern特性 */
  font-feature-settings: "kern" off;
}

注意：不是所有字体都支持这个设置，如果你的字体没有内置kern特性，这个方法可能无效。

3. CSS平移变换（transform: translateX） #

用视觉层面的平移来修正位置，不会影响页面布局（因为transform不改变盒模型尺寸）：

h1 {
  transform: translateX(-2px); /* 根据实际偏移量调整像素值 */
}

如果标题有背景色，可能需要同时调整背景的位置，比如加background-position: 2px 0来对应平移。

4. 换用侧轴承更规整的字体 #

从根源解决的话，选那些在不同字号下侧轴承比例更统一的字体，比如Inter、Roboto这类现代无衬线字体，它们的字距设计更注重跨字号的一致性，能减少这类偏移问题。

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