无头浏览器 Puppeteer 截图出现中文乱码(通常显示为方块或缺失字符),根本原因在于 Linux 服务器默认缺少中文字体库。Puppeteer 使用的 Chromium 浏览器无法渲染中文,是因为系统未安装支持中文的字体。
解决方案
根据公开资料,主流解决方式如下:
- 安装中文字体到服务器
- 更新字体缓存
- (可选)在 Puppeteer 启动参数中指定中文字体
具体操作步骤(适用于 CentOS / Ubuntu / AliLinux 等)
-
安装
fontconfig(如未安装)bashCentOS/RHEL yum install -y fontconfig Ubuntu/Debian apt-get update && apt-get install -y fontconfig -
从 Windows 系统复制中文字体到服务器
-
常用中文字体文件(位于
C:\Windows\Fonts\):simsun.ttc(宋体)msyh.ttc(微软雅黑)simhei.ttf(黑体)
-
将这些字体文件上传至服务器的
/usr/share/fonts/chinese/目录(若目录不存在则创建):bashmkdir -p /usr/share/fonts/chinese 通过 scp、rz 或其他方式上传字体文件至此目录
-
-
设置字体目录权限
bashchmod -R 755 /usr/share/fonts/chinese -
刷新字体缓存
bashfc-cache -fv -
验证中文字体是否安装成功
bashfc-list :lang=zh若输出包含
SimSun、Microsoft YaHei等字体,则表示安装成功。 -
(可选)在 Puppeteer 启动参数中指定字体
在代码中添加
--font-family参数,例如:jsconst browser = await puppeteer.launch({ headless: 'new', args: [ '--no-sandbox', '--font-family=SimSun' // 指定默认中文字体 ] });
Docker 部署场景
若使用 Docker 部署,可在 Dockerfile 中直接复制字体并安装:
dockerfile
FROM node:18-alpine
安装 Chromium 依赖和中文字体
RUN apk add --no-cache \
chromium \
nss \
freetype \
ttf-liberation \
wqy-zenhei \
font-noto-cjk \
fontconfig
复制中文字体(假设已将 msyh.ttc 放在本地目录)
COPY msyh.ttc /usr/share/fonts/
更新字体缓存
RUN fc-cache -fv
设置 Puppeteer 使用系统 Chromium
ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true \
PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser
... 其他配置
总结
- 根本原因:Linux 服务器无中文字体。
- 核心解决:安装中文字体 + 运行 `fc-cache -fv`。
- 推荐字体:`SimSun`、`Microsoft YaHei`、`WenQuanYi Zen Hei`。
- 验证命令:`fc-list :lang=zh`。
完成上述操作后,Puppeteer 截图中文乱码问题即可解决。