如何用CSS调整Caslon字体baseline，使其适配bounding box？

我使用Caslon字体时，文字在其bounding box内未垂直居中，和Inter字体对比存在明显差异，导致难以创建视觉平衡的页面。

二者的差异：

• Inter的基线更贴近bounding box
• Inter的下行字母（如g、y）触碰甚至略低于bounding box底部
• Inter的整体视觉行高更接近CSS设置的line-height

对比截图：

生成截图的原始CSS代码：

.text {
    font-size: 3.75rem;
    line-height: 1;
    border: 1px solid black;
}

注：Caslon并非免费字体，无法提供完整复现代码。

可行的CSS调整方案 #

1. 微调line-height #

Caslon的字体em框和视觉区域不匹配，默认line-height:1下视觉上会偏移。可以通过微调line-height值让视觉对齐：

.text {
    font-size: 3.75rem;
    line-height: 1.08; /* 具体值根据视觉效果调整 */
    border: 1px solid black;
}

这个方法最简单，适合快速调整。

2. 使用上下内边距修正 #

利用em单位的缩放特性，给元素添加上下内边距手动偏移视觉中心：

.text {
    font-size: 3.75rem;
    line-height: 1;
    border: 1px solid black;
    padding-top: 0.12em;
    padding-bottom: 0.08em;
}

根据字体的视觉偏移方向调整上下padding比例，确保整体垂直居中。

3. 绝对定位+Transform精准对齐 #

通过容器相对定位，文字绝对定位并垂直平移，实现像素级对齐：

.text-container {
    position: relative;
    height: 3.75rem; /* 匹配字体大小 */
    line-height: 1;
    border: 1px solid black;
}
.text-container span {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

这种方法不受字体度量影响，适合需要精确控制的场景。

4. 利用font-size-adjust属性 #

该属性基于字体的x-height调整渲染大小，帮助缩小不同字体的视觉差异：

.text {
    font-size: 3.75rem;
    line-height: 1;
    border: 1px solid black;
    font-size-adjust: 0.5; /* 需根据Caslon的x-height测试调整 */
}

兼容性良好，能让不同字体的视觉大小和对齐更一致。

5. 自定义字体度量（进阶） #

如果有字体编辑权限，可以修改Caslon字体的OS/2表中的ascender、descender和lineGap值，让字体的em框更贴合视觉区域。但此方法涉及字体版权，且需要专业字体编辑工具（如FontForge）操作。

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