响应式网站多字体尺寸适配：如何基于font-family优化排版规则

这个问题真的太戳中痛点了！我自己在做响应式项目混搭字体的时候也遇到过——明明字号设的一模一样，视觉上一个显大一个显小，特别别扭。下面给你几个既解决问题又不用重复写代码的实用方案：

这是CSS专门为解决字体视觉差异设计的属性，核心是对齐不同字体的x高度（小写字母x的高度，是决定字体视觉大小的关键）。它会自动缩放字体大小，让目标字体的x高度和你指定的基准字体一致。

举个例子：假设你的主字体是Arial（x高度比例约0.52），次要字体是Georgia（x高度比例约0.47），可以这么写：

/* 主字体样式 */
.text-primary {
  font-family: Arial, sans-serif;
  font-size: 16px;
}

/* 次要字体自动匹配主字体视觉高度 */
.text-secondary {
  font-family: Georgia, serif;
  font-size: 16px;
  font-size-adjust: 0.52; /* 对齐主字体的x高度比例 */
}

这个属性现代浏览器支持很好（除了IE），不用额外写响应式规则，直接就能让字体视觉大小统一。

如果你的项目需要在不同断点调整字号，重复写媒体查询会非常冗余。用CSS变量可以把响应式规则抽离出来，只维护一套变量就能适配所有字体：

/* 定义全局基础变量 */
:root {
  --base-font-size: 16px;
  /* 针对不同字体的缩放系数，根据视觉差异调整 */
  --primary-font-scale: 1;
  --secondary-font-scale: 1.1; 
  
  /* 响应式断点变量，方便统一修改 */
  --bp-md: 768px;
  --bp-lg: 1200px;
}

/* 主字体样式 */
.text-primary {
  font-family: Arial, sans-serif;
  font-size: calc(var(--base-font-size) * var(--primary-font-scale));
}

/* 次要字体样式 */
.text-secondary {
  font-family: Georgia, serif;
  font-size: calc(var(--base-font-size) * var(--secondary-font-scale));
}

/* 响应式规则只写一次！所有字体自动适配 */
@media (min-width: var(--bp-md)) {
  :root {
    --base-font-size: 18px;
  }
}

@media (min-width: var(--bp-lg)) {
  :root {
    --base-font-size: 20px;
    /* 大屏下如果需要微调字体比例，直接改变量就行 */
    --secondary-font-scale: 1.05;
  }
}

不管你有多少种字体，只需要在:root里调整变量，响应式逻辑完全复用，再也不用重复写媒体查询。

如果不想给元素加额外的类，还可以用CSS属性选择器直接匹配font-family属性，自动调整样式：

/* 全局匹配使用Georgia字体的元素 */
[style*="font-family: Georgia"] {
  font-size: calc(100% * 1.1);
  /* 也可以结合font-size-adjust */
  font-size-adjust: 0.52;
}

注意：这个方法要求font-family的写法完全匹配（比如引号、字体顺序），所以更适合全局统一设置的场景，和自定义变量结合使用会更稳妥。

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