Puppeteer截图/生成PDF乱码：alpine linux中文字体如何解决？
Author：zhoulujun Date：
Puppeteer在生成PDF与截图的时候，发现中文全身乱码。中文好了，繁体是乱码
是因为linux上，默认没有中文字体支持，特别是像alpine这种魔改精简版！
linux字体推荐
Linux 上常用的支持中文简体与繁体的字体，我们肯定推荐开源免费可以商用的
Noto Sans CJK（思源黑体）
Google 和 Adobe 合作推出的开源字体，支持完整的 CJK 字符集。
字体风格现代化，适用于网页和文档。
包名：
font-noto-cjk文泉驿系列
文泉驿正黑（wqy-zenhei）：传统黑体风格，支持简体和繁体中文。
文泉驿微米黑（wqy-microhei）：适合小屏幕的简洁字体。
包名：
wqy-zenhei,wqy-microhei思源宋体（Noto Serif CJK）
传统宋体风格，与 Noto Sans CJK 搭配使用。
包名：
font-noto-cjk阿里巴巴普惠体
免费商用字体，支持简体中文。
需要手动下载字体文件并安装。
AR PL 字体
ttf-arphic-uming（华文明体风格）：适合繁体中文。ttf-arphic-ukai（仿宋风格）：支持简体和繁体中文。
首推思源与文泉驿，个人鉴于设置Noto Sans CJK 优先。
# Install necessary font
RUN apk add --no-cache \
fontconfig \
font-noto-cjk \
ttf-ubuntu-font-family \
ttf-freefont \
ttf-liberation \
font-droid-nonlatin\
ttf-roboto
RUN fc-cache -f -v字体包搜索，可以在pkgs.alpinelinux.org 上面查查看
整体如下：
# Base image
FROM acrdevopsprodeas01.azurecr.io/node:20-alpine
# Create app directory
WORKDIR /app
# Install app dependencies
COPY package.json /app/
# Install necessary font
RUN apk add --no-cache \
fontconfig \
font-noto-cjk \
ttf-ubuntu-font-family \
ttf-freefont \
ttf-liberation \
font-droid-nonlatin\
ttf-roboto
RUN fc-cache -f -v
# Install necessary packages for Puppeteer
RUN apk add --no-cache chromium nss freetype harfbuzz ca-certificates ttf-freefont
#RUN npx puppeteer browsers install chrome
ENV PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser \
UPPETEER_SKIP_CHROMIUM_DOWNLOAD="true"
RUN yarn install --ignore-scripts && yarn cache clean
# Bundle app source
COPY . /app
# EXPOSE 8000
CMD [ "yarn", "start" ]在前端配置：
body {
margin: 0;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
"Noto Sans CJK",
"Noto Sans SC",
"Noto Sans TC",
"Roboto",
"Poppins",
"Oxygen",
"Ubuntu",
"Cantarell",
"Fira Sans",
"Droid Sans",
"Helvetica Neue",
sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
@apply text-ft-text-primary min-w-[375px]; /* NOTE: `375px` is iPhone SE width */
}当然，也可以不在linux上安装字体，完全靠前端解决
前端解决linux乱码问题：
AKS 运维如过不能很好的配合搞镜像的话，也可以前端自己解决
比如google字体：https://github.com/notofonts/noto-cjk
也可以去google font 搜索：https://fonts.google.com/noto/specimen/Noto+Sans+SC
下载思源黑体
可以从 Google 或 Adobe 获取字体文件，例如：
Noto Sans CJK：Google Fonts
Noto Sans CJK 的字体文件：
NotoSansCJK-Regular.otf。
然后设置css
@font-face {
font-family: 'Noto Sans CJK';
src: url('fonts/NotoSansCJK-Regular.otf') format('opentype');
font-weight: normal;
font-style: normal;
}
body {
font-family: "Noto Sans CJK", "Helvetica Neue", Arial, sans-serif;
}然后使用使用 JavaScript 动态加载 css样式
<script>
// 判断操作系统是否为 Linux
if (navigator.platform.indexOf('Linux') !== -1) {
var link = document.createElement('link');
link.rel = 'stylesheet';
//link.href = 'https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;700&family=Noto+Sans+TC:wght@400;700&display=swap';
link.href = './demo.css';
document.head.appendChild(link);
}
</script>当然，也可以使用媒体查询器
版权问题
思源黑体是完全免费的，适合用于商业项目，包括网站、印刷品、广告、应用程序等。
思源黑体由 Google 和 Adobe 合作推出，发布于 SIL Open Font License 1.1 (OFL 1.1) 授权协议下。这种协议允许用户在以下条件下自由使用字体：
免费使用：可以自由地用于个人或商业用途。
自由分发：可以将字体分发给他人。
修改和衍生：
允许修改字体文件并创建衍生版本。
如果分发修改后的版本，必须更改字体名称以避免与原字体混淆。
完整的 SIL OFL 1.1 协议内容可以在 SIL OFL 官网 查看。
文泉驿字体系列（如 wqy-zenhei 和 wqy-microhei）是开源字体，主要由 文泉驿项目（WenQuanYi Project）开发，遵循 GPL（GNU General Public License） 或 LGPL（Lesser General Public License） 许可协议。根据这些开源协议，文泉驿字体是免费且可以商用的。
其他的，比如微软雅黑、Segoe UI 、苹果冬青黑 ，这些在网页上展示没有问题，但是如过用于DPF与截图，涉及商用，是要赔钱的！
转载本站文章《Puppeteer截图/生成PDF乱码：alpine linux中文字体如何解决？》,
请注明出处：https://www.zhoulujun.cn/html/webfront/browser/Puppeteer/9457.html