使用62.5%字体大小技巧时，Web组件如何覆写HTML/Body的font-size？

首先明确核心逻辑：Shadow DOM 的样式隔离不会改变 rem 单位的计算规则——rem 始终基于**全局根元素（<html>）**的字体大小，而非 Shadow DOM 内部的根元素。这就是 Magento 站点设置 html { font-size: 62.5%; } 会让你组件内 .875rem 文本显示极小的原因：62.5% 相当于把默认 16px 的根字体改成了 10px，.875rem 随之变成了 8.75px。

不建议直接覆写页面的 <html>/<body> 样式 #

直接修改宿主站点的全局根字体大小会彻底破坏原有网站布局——Magento 整套系统的样式都是基于 62.5% 这个技巧设计的，改动后会导致页面其他元素的字体、间距、布局全部错乱，这是嵌入第三方组件的大忌。

可行的替代方案 #

1. 改用不受全局根字体影响的单位

• 直接使用 px：把组件内的 .875rem 转换成固定 px 值（默认 16px 基准下，.875rem = 14px），完全脱离全局样式的影响。
• em + 组件内基准：在 Shadow DOM 的根容器（比如组件外层元素）设置固定 font-size: 16px，内部文本改用 em 单位（比如 .875em，对应 14px）。em 会基于父元素字体大小计算，被限制在 Shadow DOM 内部。
• CSS 变量自定义基准：在组件内定义基础字体变量，用 calc 计算字体大小：

  :host {
    --component-base-font: 16px;
  }
  .text-element {
    font-size: calc(var(--component-base-font) * 0.875);
  }
  

2. 动态抵消全局根字体的影响

通过 JavaScript 获取全局 <html> 的实际字体大小，在 Shadow DOM 内部设置对应比例的根字体，让组件内的 rem 计算逻辑和其他平台一致：

// 获取全局根字体大小（转为数值，单位px）
const globalRootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
// 以默认16px为基准，计算缩放比例
const scaleRatio = 16 / globalRootFontSize;
// 在Shadow DOM根元素设置font-size，让组件内rem基于16px计算
const shadowRoot = yourComponent.shadowRoot;
shadowRoot.style.fontSize = `${scaleRatio}rem`;

这样组件内的 .875rem 就等价于 0.875 * 16px = 14px，和其他平台显示效果一致。

3. 用 font-size-adjust 强制保持字体一致性（备选）

如果需要保留 rem 单位，可以尝试用 font-size-adjust 强制维持字体的 x-height 一致，兼容性稍差，适合作为补充方案：

.text-element {
  font-size: .875rem;
  font-size-adjust: 0.54; /* 根据你使用的字体调整数值 */
}

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