Chrome Extension上传后字体大小与本地开发测试显示异常问题咨询

问题根因 #

Chrome 扩展运行在独立的沙箱上下文，其默认的用户代理（UA）样式表、系统字体匹配规则和普通网页（localhost 属于普通网页上下文）存在差异，你设置的html { font-size: 100% }是相对于浏览器默认字体大小取值，而扩展上下文的默认基准字体大小往往比普通网页小2-4px，这是em单位全局偏小的核心原因。

可行解决方案 #

• 改用固定根字体大小替代百分比取值：直接给html节点设置固定px值作为基准，比如html { font-size: 16px !important; }，明确指定基准字体避免不同上下文默认值差异，后续em/rem单位都会基于这个固定值计算，完全规避环境差异。
• 强制重置扩展页面的UA样式：在你的全局CSS最顶部引入样式重置代码，覆盖Chrome扩展的默认样式：

/* 全局样式重置，放在CSS文件最开头 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html {
  font-size: 16px; /* 按你实际需要的基准大小调整 */
  -webkit-text-size-adjust: 100%; /* 禁止Chrome自动调整字体大小 */
}
body {
  font-family: 你实际使用的字体栈;
  font-size: 1rem; /* 显式指定body字体大小 */
}

• 排查打包配置的样式丢失问题：检查React打包配置，确认根字体的CSS规则没有被压缩工具优化、删除，也没有被后面的其他样式规则覆盖，可以在扩展测试页面打开F12元素面板，直接查看html节点的计算样式，确认根字体的实际取值是否和本地一致。
• content scripts场景额外处理：如果你的扩展是注入到第三方页面的内容脚本，需要给所有自定义DOM加上专属的类名前缀，避免被宿主页面的样式影响，同时给根字体设置更高的优先级，或者直接在注入的DOM节点上直接指定font-size基准值。

内容的提问来源于stack exchange，提问作者jerek.orlin