如何设置CSS字体大小使其相对于元素原本的默认字号进行缩放？

有两种常用的实现方式，具体如下：

• 方法1：使用revert关键字配合calc（现代浏览器推荐）
  你可以先用revert拿到元素的默认渲染字号（即浏览器用户代理样式表定义的该元素默认字号，或是继承得到的默认字号），再通过calc计算缩放后的大小：

/* 将h1的字号设置为默认值的1.5倍 */
h1 {
  --original-fs: revert;
  font-size: calc(var(--original-fs) * 1.5);
}

注意：revert关键字兼容Chrome 84+、Firefox 67+、Safari 13.1+，可覆盖95%以上的全球用户场景。

• 方法2：嵌套无样式父容器（全兼容方案）
  如果需要兼容更早的浏览器，可以给目标元素套一层不设置任何font-size属性的空父容器，此时父容器会继承到目标元素原本的基准字号，目标元素的font-size使用em单位时就会基于这个默认基准值缩放：

<div class="p-wrapper">
  <p class="scaled-p">我是缩小到默认值0.8倍的段落文本</p>
</div>

.p-wrapper {
  /* 不设置font-size，保留默认继承的字号作为基准 */
}
.scaled-p {
  font-size: 0.8em;
}

额外说明：em作为font-size属性的值时，参考的是父元素的字号；作为padding、margin等其他属性的值时，参考的是当前元素的字号，上述两种方案都是利用这个特性绕开了em对父元素的依赖，拿到元素自身的默认字号基准。

内容的提问来源于stack exchange，提问作者g.pickardou