如何用CSS单独设置次级字体大小，不改变回退主字体大小？

先纠正你之前代码中的核心错误 #

• @font-face 中 font-family 只能定义单个字体名称，回退字体需写在元素的 font-family 属性中，不能混在 @font-face 规则里。
• 禁止在选择器（如 .Arch-ch1 h1）内部嵌套 @font-face，@font-face 必须放在全局作用域或媒体查询中。
• font-family 属性不能包含字号值，字号需单独通过 font-size 属性设置。
• 最后尝试的 font-family:'Font2' {} 是无效的CSS语法，没有这种写法。

方案1：使用 font-size-adjust 自动匹配视觉大小（纯CSS） #

font-size-adjust 的作用是通过调整字号，让不同字体的x-height（小写字母x的高度）保持一致，从而实现相近的视觉大小。你需要先获取两个字体的x-height比例：

1. 用字体工具（如Font Squirrel的字体分析器）分别获取Font1和Font2的x-height值。
2. 计算比例：font-size-adjust: Font1的x-height / Font2的x-height。

示例代码：

/* 正确定义Font2 */
@font-face {
  font-family: 'Font2';
  src: local('font2.ttf'), format('truetype');
  /* 假设Font1的x-height是0.5，Font2是0.3，比例为0.5/0.3≈1.666 */
  font-size-adjust: 1.666;
}

.Arch-ch1 h1 {
  font-family: 'Font2', 'Font1', serif;
  font-size: 60px; /* 全局Font1的默认字号 */
  text-align: center;
}

当Font2加载时，浏览器会自动按比例调整字号，使其x-height与Font1的60px一致；回退到Font1时，直接使用60px字号，视觉大小统一。

方案2：用JS检测字体加载状态，动态设置字号（更直接） #

如果你已经明确Font2需要100px才能匹配Font1的60px视觉大小，可以用Font Loading API检测Font2是否加载成功，再动态调整字号：

/* 先定义基础样式 */
.Arch-ch1 h1 {
  --h1-font-size: 60px;
  font-family: 'Font2', 'Font1', serif;
  font-size: var(--h1-font-size);
  text-align: center;
}

// 检测Font2是否加载成功
document.fonts.load('1em Font2')
  .then(() => {
    // Font2可用，设置为100px
    document.querySelectorAll('.Arch-ch1 h1').forEach(el => {
      el.style.setProperty('--h1-font-size', '100px');
    });
  })
  .catch(() => {
    // Font2加载失败，保持默认60px
  });

这种方法不需要计算x-height，直接按你已知的字号需求设置，逻辑更直观。

内容的提问来源于stack exchange，提问作者K-RAM