iOS动态字体适配：如何用CSS将根字体设为系统值的62.5%

嘿，这个需求完全可以用纯CSS实现，不用依赖JavaScript！我来给你详细讲一下方案和原理：

核心CSS方案 #

:root {
  /* 先绑定iOS系统动态字体样式，获取系统的字号、行高、字重等属性 */
  font: -apple-system-body;
  /* 将当前系统字号存入CSS变量（1em 等于此时根元素的font-size，也就是系统给定值） */
  --system-base-size: 1em;
  /* 把根字号设置为系统值的62.5%，默认就是 16px * 0.625 = 10px */
  font-size: calc(var(--system-base-size) * 0.625);
  /* 显式指定字体家族，确保font-size设置不会影响系统字体的继承 */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

为什么这个方案能生效？ #

• 第一步的font: -apple-system-body是关键：它让根元素完全继承iOS系统的动态字体配置，包括用户在「更大字体」里调整后的字号。这一步会让根元素的font-size自动跟随系统变化。
• 用--system-base-size: 1em捕获当前的系统字号：1em在这里等价于根元素此时的font-size（也就是系统刚给的原始值），把它存成CSS变量方便后续计算。
• 最后用calc(var(--system-base-size) * 0.625)把根字号按比例缩小：这样不管系统字号变成多少（比如用户调到20px），根字号都会自动变成对应值的62.5%（20px*0.625=12.5px），全站的rem单位自然就跟着适配了。

优势对比JS方案 #

• 纯CSS方案不需要等待DOM加载，不会出现JS执行前的字号闪烁问题；
• 代码更简洁，完全在样式层面解决，没有脚本依赖；
• 响应更快，系统字号变化时CSS会即时更新，不需要JS监听事件。

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