如何处理复杂文本排版？PSD转HTML/CSS的字体间距难题

核心问题本质 #

你遇到的是字体内置上下留白与设计稿垂直间距要求不匹配的问题——Myriad Pro这类字体自带较大的默认行高留白，导致CSS原生排版无法精准贴合PSD的紧凑设计。

优先推荐的解决方案 #

1. 精准控制单元素行高+Flex布局（替代负边距） #

负边距属于hack式调整，维护性差。更可靠的方式是针对不同字号的文本单独设置行高，配合Flex布局实现垂直对齐：

• 超大号文本（如"25"）设置line-height: 0.9~1，直接压缩字体自带的上下留白
• 用Flex容器的justify-content: center控制整体垂直分布，避免容器留白过多
• 示例代码：

<div class="sale-banner">
  <div class="sale-title">Sale</div>
  <div class="sale-desc">Up to</div>
  <div class="sale-number">25</div>
  <div class="sale-off">% Off</div>
</div>

.sale-banner {
  font-family: "myriad-pro", sans-serif;
  background: #fff;
  width: 315px;
  height: 147px; /* 匹配参考图高度 */
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 20px;
  box-sizing: border-box;
}
.sale-title {
  font-size: 22px;
  line-height: 1.1;
  margin: 0 0 2px;
}
.sale-desc {
  font-size: 16px;
  line-height: 1;
  margin: 0 0 8px;
}
.sale-number {
  font-size: 70px;
  line-height: 0.9;
  margin: 0 0 4px;
}
.sale-off {
  font-size: 22px;
  line-height: 1.1;
  margin: 0;
}

2. 绝对定位作为兜底方案 #

如果Flex+行高仍无法完全匹配设计稿的像素级要求，可采用绝对定位实现精准控制：

• 父容器设置position: relative
• 每个文本元素设置position: absolute，通过top/bottom属性直接定位
• 优点是完全精准，缺点是响应式场景下需要额外适配断点

3. 用font-size-adjust辅助校准 #

Myriad Pro的x-height比例约为0.58，可通过font-size-adjust强制调整字体垂直比例，减少内置留白的影响：

.sale-banner * {
  font-size-adjust: 0.58;
}

SVG文本方案的合理性分析 #

不推荐将文本转为SVG，原因如下：

• 丢失文本可访问性，屏幕阅读器无法识别内容
• 无法动态修改内容（如后端更新折扣数字）
• 已通过Typekit加载字体，SVG文本会增加额外资源体积

你试过的方案优劣复盘 #

• 导出PNG：直接放弃，画质损失+无法适配不同分辨率
• 负边距：临时可用，但维护性差，不同屏幕尺寸下易出现排版错乱
• 调整行高：方向正确，但需针对每个字号单独设置，而非全局统一调整
• SASS混合宏：依赖字体metadata，Myriad Pro缺失数据的情况下无法使用，场景受限

优化后的测试代码 #

<html>
  <head>
    <link rel="stylesheet" href="https://use.typekit.net/toj1dxz.css" />
    <style>
      .sale-container {
        display: flex;
        gap: 2rem;
        align-items: center;
        padding: 1rem;
      }
      .sale-banner {
        font-family: "myriad-pro", sans-serif;
        background: #ffffff;
        width: 315px;
        height: 147px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 0 20px;
        box-sizing: border-box;
      }
      .sale-banner > div {
        margin: 0;
        line-height: 1;
      }
      .sale-title {
        font-size: 22px;
        margin-bottom: 2px;
      }
      .sale-desc {
        font-size: 16px;
        margin-bottom: 8px;
      }
      .sale-number {
        font-size: 70px;
        line-height: 0.9;
        margin-bottom: 4px;
      }
      .sale-off {
        font-size: 22px;
      }
    </style>
  </head>
  <body>
    <div class="sale-container">
      <div class="sale-banner">
        <div class="sale-title">Sale</div>
        <div class="sale-desc">Up to</div>
        <div class="sale-number">25</div>
        <div class="sale-off">% Off</div>
      </div>
      <div>
        <img src="https://i.sstatic.net/l19aL.png" alt="Reference Design" width="315" height="147" />
      </div>
    </div>
  </body>
</html>

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