macOS下动态设置<html>元素字体大小后行高未同步变更问题

这种跨平台的样式兼容坑真的让人头大，我之前在做响应式字体适配的时候也碰到过macOS Safari的这个问题——明明根元素的font-size已经动态改了，行高却死活不跟着变，一直卡在初始值。结合你的描述，我来拆解下问题原因和可行的解决方案：

问题根源分析 #

macOS上的Safari（应该是你碰到异常的核心浏览器）在处理行高时有个容易被忽略的特性：

• 如果你依赖默认的line-height: normal，或者行高是基于字体本身的隐含值，Safari会在首次渲染时把行高值固化缓存，后续根元素字体大小变化时，不会重新触发行高的计算，因为它认为这是字体本身的固定度量，不是动态的相对单位。
• 另外，用百分比设置<html>的font-size时，Safari对相对单位的行高解析逻辑和其他浏览器有差异，导致无法联动更新。

可行的解决方案 #

1. 显式设置相对单位的行高 #

别再依赖浏览器默认的行高了，给需要动态调整的元素明确设置无单位相对值或rem单位的行高：

/* 推荐：无单位相对值，基于当前元素的字体大小动态计算 */
body {
  line-height: 1.5;
}

/* 或者：基于根元素字体大小的rem单位 */
.content-block {
  line-height: 1.6rem;
}

这种方式下，行高会明确跟着字体大小（或根字体大小）联动，Safari不会再固化缓存行高值。

2. 手动触发浏览器重排/重绘 #

有时候Safari没检测到根字体变化带来的样式更新，我们可以在修改font-size后手动触发重排，逼它重新计算样式：

// 先按你的逻辑修改根字体大小
const htmlEl = document.documentElement;
const screenWidth = window.innerWidth;
// 这里替换成你的核心计算逻辑
const calculatedFontSize = (screenWidth / 1200) * 100 + '%'; 
htmlEl.style.fontSize = calculatedFontSize;

// 触发重排：读取offsetHeight会强制浏览器重新计算布局
htmlEl.offsetHeight;

// 或者用类切换的方式，更稳妥
htmlEl.classList.add('force-reflow');
htmlEl.classList.remove('force-reflow');

对应的CSS加个空类就行（不需要实际样式，只要触发样式变更）：

.force-reflow {
  /* 空样式即可，目的是触发浏览器重排 */
}

3. 避免依赖系统字体的默认行高 #

macOS的系统字体（比如San Francisco）在渲染行高时有特殊逻辑，如果你用了系统字体，可以显式指定字体族并配合相对行高：

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.5;
}

这样能确保行高计算完全基于你设置的相对值，而不是字体本身的隐含行高。

4. 改用px/rem设置根字体大小（可选） #

如果你的业务场景允许，可以把根字体的百分比设置改成明确的px或rem值，比如：

const screenWidth = window.innerWidth;
const baseSize = 16; // 基础字体大小，对应默认的16px
const scale = screenWidth / 1920; // 按1920px宽为基准缩放
htmlEl.style.fontSize = `${baseSize * scale}px`;

这种方式下根字体大小是明确的数值，Safari对相对行高的解析会更一致。

验证方法 #

你可以在macOS Safari的开发者工具里验证效果：

• 按下Cmd+Opt+I打开开发者工具
• 选中目标元素，切换到「Computed」标签，查看line-height的计算值
• 修改根字体大小后，刷新计算样式，看行高是否同步更新

如果行高能跟着变化，说明你的解决方案生效了。

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