Puppeteer打印PDF时大字号文本行高上下留白不一致如何修复

问题原因 #

该渲染差异本质是自定义字体文件内置的ascent、descent、line-gap元数据不规范导致的。多数免费商用自定义字体导出时未按标准校准字体度量值，不同浏览器内核（本地常规浏览器、Puppeteer内置Chromium）对非标准字体度量的解析逻辑存在差异，仅靠调整line-height无法实现跨环境一致的垂直对齐效果，Arial这类系统内置字体的度量值是严格标准化的，因此不会出现该问题。

可行修复方案 #

按推荐优先级从高到低排列：

• 方案1：重写字体度量（最优，无侵入、渲染一致性最高） #

  利用CSS @font-face的度量重写属性，覆盖自定义字体文件里不规范的内置留白参数，从根源消除不同内核的解析差异，新版Chrome/Edge、Puppeteer 19+内置的Chromium均完美支持该特性。

  /* 重写自定义字体的度量值 */
  @font-face {
    font-family: "YourCustomFont";
    src: url("your-custom-font-path.woff2") format("woff2");
    /* 三个数值可根据实际字体微调，每次调整2%幅度直到上下留白均匀即可 */
    ascent-override: 82%;
    descent-override: 18%;
    line-gap-override: 0%;
  }
  .text {
      font-size: 155px;
      margin: 0;
      line-height: 1; /* 不需要再设0.9这类小于1的行高 */
      letter-spacing: -4px;
      leading-trim: both; /* 裁剪行盒上下的多余内置边距 */
      text-edge: cap alphabetic;
      overflow: hidden;
  }
  

  该方案不需要修改HTML结构，调整完成后所有环境的文本渲染位置完全一致。

• 方案2：Flex容器强制居中（兼容性最好） #

  如果使用的Puppeteer版本较低不支持leading-trim属性，可以给文本套一层固定高度的容器，用Flex布局强制文本块垂直居中，完全不依赖字体本身的度量规则。

  .text-container {
    /* 高度按实际需要的文本可视高度调整，155px字号下140px左右可实现紧凑留白 */
    height: 140px;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .text {
      font-size: 155px;
      margin: 0;
      line-height: 1;
      letter-spacing: -4px;
  }
  

  对应HTML结构调整为：

  <div class="text-container">
    <p class="text">1234</p>
  </div>
  

  该方案兼容性覆盖所有支持Flex的浏览器版本，不管字体本身的留白多不规范，都能保证文本在容器内稳定居中。

• 方案3：位移微调（兜底临时方案） #

  不想修改结构和字体配置的场景下，可以直接给文本元素加Y轴位移，手动校准位置：

  .text {
      font-size: 155px;
      margin: 0;
      line-height: 0.9;
      letter-spacing: -4px;
      overflow: hidden;
      /* 数值根据实际偏移量调整，文本偏下就设负值往上移，偏上就设正值往下移 */
      transform: translateY(-2px);
  }
  

  该方案缺点是换字号、换字体、出现带降部的字符（如g、j、y）时需要重新校准偏移值，仅适合临时快速修复。

额外注意事项 #

Puppeteer导出PDF时，页面加载参数必须加waitUntil: 'networkidle0'，等自定义字体100%加载完成后再触发打印动作，避免字体加载过程中fallback到系统字体导致的重排错位。

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