Puppeteer字体渲染错位、显示异常问题排查求助

云原生阿岚

2026-7-7

Puppeteer访问页面文本格式异常（Chrome正常）排查方案

我用Chrome浏览器访问目标页面时显示正常，但通过Puppeteer访问时出现文本格式异常。已移除--font-render-hinting=none参数，问题仍未解决。

正确效果截图：
错误效果截图：

我的Puppeteer启动代码：

const browser = await puppeteer.launch({
    args: [
        '--no-sandbox',
        '--disable-gpu',
        "--proxy-server='direct://'",
        '--proxy-bypass-list=*',
        '--allow-file-access-from-files',
        '--disable-setuid-sandbox',
        '--no-first-run',
        '--no-zygote',
        '--font-render-hinting=none', // 已移除该参数但问题依旧
    ],
});
const page = await browser.newPage();

await page.goto('https://www.***.com');

以下是几个排查方向：

修复代理参数格式：--proxy-server='direct://'中的单引号属于多余字符，会导致参数解析异常，改成--proxy-server=direct://后重试。
去掉--no-zygote参数：该参数会改变Chromium的进程模型，可能引发渲染层面的兼容性问题，移除后测试是否恢复正常。

模拟真实浏览器环境：设置Chrome官方UA字符串，避免页面针对无头浏览器做特殊渲染：

await page.setUserAgent('Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36');

确保页面完全加载：添加networkidle2等待策略，保证页面动态渲染的文本资源加载完成：
```
await page.goto('https://www.***.com', { waitUntil: 'networkidle2' });
```
禁用无头模式验证：显式设置headless: false启动可视化Chromium窗口，直接观察窗口内的显示效果，确认是否是无头模式特有的渲染问题。
补充字体渲染参数：尝试添加--enable-font-antialiasing启用字体抗锯齿，或者指定系统字体路径（如--font-path=/usr/share/fonts，根据操作系统调整），解决Chromium默认字体缺失导致的 fallback 异常。