如何按固定比例调整所有HTML标题标签的字体大小

错误原因 #

你使用的font-size: calc(2em/1.5em)规则不生效的核心原因有两点：

• 两个带em单位的值相除会得到无单位的纯数值，浏览器不支持无单位的font-size属性值，因此规则不会被触发
• 硬编码2em无法适配h1~h6各不相同的基础字号，没法做到统一比例缩放

解决方案 #

方案1：相对单位比例缩放

利用em的继承特性，基于各标题原有的基础字号做统一比例放大：

/* 匹配所有h1~h6下的手写字体元素，假设手写字体的类名为.handwritten */
:is(h1, h2, h3, h4, h5, h6) .handwritten {
  /* 1.5为放大比例，可根据实际视觉对等效果调整 */
  font-size: calc(1em * 1.5);
}

如果是直接给h1~h6本身设置Dancing Script字体，可直接覆盖各标题字号：

h1 { font-size: calc(2rem * 1.5); }
h2 { font-size: calc(1.5rem * 1.5); }
h3 { font-size: calc(1.17rem * 1.5); }
h4 { font-size: calc(1rem * 1.5); }
h5 { font-size: calc(0.83rem * 1.5); }
h6 { font-size: calc(0.67rem * 1.5); }

方案2：使用font-size-adjust属性（更推荐）

该CSS属性专门用于解决不同字体视觉大小不一致的问题，无需手动适配不同字号的元素，会自动根据x高度调整字体大小实现视觉对齐：

.handwritten {
  font-family: 'Dancing Script', cursive;
  /* 0.5是Helvetica、Arial等无衬线字体的常用x高度比例，可根据实际对齐效果调整 */
  font-size-adjust: 0.5;
}

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