咨询：descent-override属性在Safari中无效时，字体底部留白过多问题的替代解决方案

嘿，这个问题我之前做字体适配的时候也踩过坑！Safari对CSS字体度量属性（比如descent-override）的支持确实滞后，给你几个实用的替代方案，按需选择：

方案1：用line-height或负边距微调（快速见效） #

这是最直接的兼容方式，针对使用目标字体的元素手动调整行高或边距，抵消多余的空白：

/* 保留原@font-face配置，给支持的浏览器生效 */
@font-face {
  font-family: xyz;
  src: url("./fonts/CallieshaDemoRegular.ttf");
  descent-override: 90%;
}

/* 给使用该字体的元素添加兼容样式 */
.text-with-xyz {
  font-family: xyz;
  /* 根据实际空白大小调整，比如1.0~1.2之间测试 */
  line-height: 1.1;
  /* 可选：用负margin进一步微调底部空白 */
  margin-bottom: -0.1em;
}

如果想更精准地针对Safari（或者不支持descent-override的浏览器），可以用@supports做特性检测：

@supports not (descent-override: 90%) {
  .text-with-xyz {
    line-height: 1.1;
    /* 或者用transform轻微上移文本，注意可能影响布局 */
    transform: translateY(-2%);
  }
}

方案2：修改字体文件本身（一劳永逸） #

如果项目允许，直接调整字体的原始度量值是最彻底的解决办法，所有浏览器都能统一效果。推荐用FontForge（免费开源的字体编辑工具）操作：

1. 打开你的CallieshaDemoRegular.ttf文件
2. 点击菜单栏「字体」→「字体信息」
3. 切换到「OS/2」选项卡，找到「Descent」（下降值）选项
4. 把原数值乘以90%（比如原Descent是200，就改成180），点击确定保存
5. 导出新的TTF字体文件替换原文件

这样修改后，不需要任何CSS属性，字体在所有浏览器里的底部空白都会符合你的要求。

方案3：用font-size-adjust辅助调整（可选） #

虽然font-size-adjust主要是用来保持字体x高度的一致性，但也能间接影响行内空白的表现。你可以尝试结合它和line-height使用：

.text-with-xyz {
  font-family: xyz;
  font-size-adjust: 0.5; /* 根据字体x高度调整数值 */
  line-height: 1.1;
}

总结 #

如果追求快速兼容，方案1最省心；如果想彻底解决所有浏览器的一致性问题，方案2是最优解。

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