span内文本与body直接放置文本的差异及宽度一致实现方案

二者宽度不同的核心原理 #

• 上下文排版规则不同：直接放在body内的文本属于根块级元素<body>的直接文本节点，处于<body>生成的块级上下文中；包裹在<span>内的文本属于行内元素的子文本节点，处于span生成的行内上下文中，二者的宽度计算逻辑本身存在差异。
• 浏览器默认样式差异：浏览器自带的用户代理（UA）样式表会对不同类型元素设置不同的默认排版参数，直接文本节点完整继承<body>的字体、字距属性，而<span>作为行内元素，部分浏览器会默认给其开启font-kerning（字偶距调整）、text-rendering: optimizeLegibility（可读性优化）等特性，会自动微调字符间距，最终产生你测试到的像素级宽度偏差。
• 空白字符处理差异：浏览器对块级元素内直接文本的空白折叠规则，和行内元素内文本的空白折叠规则存在细微区别，若文本前后存在不可见的换行、空格、零宽字符，也会导致最终计算出的宽度出现小数级的差异。

统一二者宽度的配置方法 #

• 全局重置排版参数，覆盖浏览器默认UA样式差异，示例CSS代码如下：

/* 全局统一排版基础属性 */
* {
  margin: 0;
  padding: 0;
  font-family: inherit;
  font-size: 100%;
  font-kerning: normal;
  text-rendering: geometricPrecision; /* 关闭自动字距优化，保证宽度计算精确 */
  letter-spacing: normal;
  word-spacing: normal;
  box-sizing: border-box;
}
body {
  /* 全局字体统一在body设置，所有元素继承 */
  font-family: 自定义字体, sans-serif;
}

• 若无需<span>的特殊行内特性，可显式指定span的布局属性：span { display: inline; }，强制继承body的排版规则，避免部分浏览器对行内元素的特殊排版调整。
• 排查页面是否存在针对<span>的全局自定义样式，比如transform: scale()、font-size使用相对单位导致的计算偏差，这类样式都会影响文本最终渲染宽度。

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