如何在Puppeteer/Chromium中设置最小字体大小以统一PDF效果？

由于Chrome和Chromium默认的最小字体大小（尤其是中文）存在差异，导致Puppeteer生成的PDF与Chrome原生window.print()效果不一致，你可以通过以下几种方法统一设置最小字体大小：

方法1：通过Chrome DevTools协议（CDP）修改浏览器偏好 #

直接通过CDP修改Chromium的字体偏好，和Chrome的默认最小字体大小（12px）对齐：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  // 建立CDP会话
  const cdpSession = await page.target().createCDPSession();
  
  // 设置全局最小字体大小为12px
  await cdpSession.send('Preferences.setPreference', {
    name: 'webkit.webkitPreferences.minimumFontSize',
    value: 12
  });
  
  // 针对中文等逻辑字体，设置最小逻辑字体大小
  await cdpSession.send('Preferences.setPreference', {
    name: 'webkit.webkitPreferences.minimumLogicalFontSize',
    value: 12
  });

  // 加载目标页面并生成PDF
  await page.goto('https://your-target-page.com');
  await page.pdf({ path: 'unified-output.pdf', format: 'A4' });

  await browser.close();
})();

方法2：在页面中注入CSS强制最小字体大小 #

如果不需要修改浏览器全局设置，可以直接给目标页面注入CSS，强制所有元素字体大小不小于12px：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  
  await page.goto('https://your-target-page.com');
  
  // 注入强制最小字体的样式
  await page.addStyleTag({
    content: `
      * {
        font-size: max(12px, inherit) !important;
      }
      /* 针对中文优化：指定中文字体并强制最小大小 */
      body, .chinese-text {
        font-family: "PingFang SC", "Microsoft YaHei", sans-serif;
        font-size: max(12px, inherit) !important;
      }
    `
  });

  await page.pdf({ path: 'unified-output.pdf', format: 'A4' });

  await browser.close();
})();

方法3：启动Chromium时添加命令行参数 #

启动Puppeteer时，通过args传递--force-minimum-font-size参数，全局强制最小字体大小：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch({
    args: ['--force-minimum-font-size=12']
  });
  const page = await browser.newPage();
  
  await page.goto('https://your-target-page.com');
  await page.pdf({ path: 'unified-output.pdf', format: 'A4' });

  await browser.close();
})();

方法对比 #

• 方法1和3：修改浏览器全局设置，完全模拟Chrome的原生行为，适合需要和window.print()完全一致的场景。
• 方法2：页面级强制设置，无需修改浏览器参数，适合无法调整Chromium启动配置的环境。

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