解决Ubuntu下Chrome中文字体混乱问题

因为涉及到下载报告中有使用echarts图表展示，而且报告系统有多语言的版本。所以报告中的图表由后端直接在服务端渲染生成图片返回下载。

在使用 pyecharts 进行图表渲染的时候，在Ubuntu使用 chrome 浏览器进行图表渲染的时候，发现传入的中文字符或者 Unicode 字符在页面上显示的乱码。而且只能显示数字或者大写字母。

问题描述

当尝试渲染包含中文字符或 Unicode 字符的图表时，发现在页面上显示的中文字符是乱码的，而且只能正常显示数字或大写字母。

image
s

解决尝试

1. 字符集设置

首先，考虑是否是字符集没有设置为 UTF-8。虽然尝试将字符集从 UTF-8 改为 GBK，但未能解决问题。

2. 浏览器版本问题

检查浏览器版本，发现使用的 Chrome 版本较旧只有 70 的版本。升级至最新版本（120以上），但问题依然存在。

3. 字体问题

考虑到字体是否不支持中文字符，又尝试下载字体，在生成 echarts 图的时候同时设置引入字体。也没有解决问题。

4. 系统中文字体支持

最终在 Chrome 设置中发现系统中缺少中文字体。此时，尝试通过以下步骤安装中文字体：

sudo apt-get install fonts-wqy-zenhei

fc-cache -f -v

* {
    font-family: -apple-system, "Noto Sans", "Helvetica Neue", Helvetica, "Nimbus Sans L", Arial, "Liberation Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans CJK SC", "Source Han Sans SC", "Source Han Sans CN", "Microsoft YaHei", "Wenquanyi Micro Hei", "WenQuanYi Zen Hei", "ST Heiti", SimHei, "WenQuanYi Zen Hei Sharp", sans-serif;
}

结果

由于系统中就没有中文字体支持，所以在浏览器端怎么修改都无法解决问题。通过安装中文字体并刷新系统字体缓存，解决了中文字符乱码的问题。重新生成 echarts 图表时，中文字符能够正常显示。

总结

问题的关键在于系统中缺乏中文字体支持。即使在浏览器端进行各种调整，如果系统本身不支持中文字符集，问题仍无法解决。因此，确保系统中安装了适当的字体是解决类似问题的关键步骤。