坚果大叔 坚果大叔
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
首页 › 技术 › 解决Ubuntu下Chrome中文字体混乱问题

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

坚果大叔
2023-12-24 19:19:13技术阅读 11,855

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

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

问题描述

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

解决Ubuntu下Chrome中文字体混乱问题-坚果大叔
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 图表时,中文字符能够正常显示。

总结

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

赞赏 赞(3)
那天下雪❄️
上一篇
2023!平平淡淡的一年!
下一篇
在小程序中查看
搜你想看的
聚合文章
门前的空地,转眼又绿了
Css要点
如何实现深拷贝?
CSS实现 Tab hover 下划线跟随
闲言碎语
Memos
Nuxt3中piana持久化处理!
2025-06-22 18:45:45
439 0 1
npm install 出现 Error:EISDIR:illegal operation on a directory 的错误提示!
2025-03-31 19:02:11
948 0 0
iphone 利用 Scriptable 添加网上国网电费小组件
2025-01-06 20:40:20
7,407 2
在博客中加上memos记录展示。
2024-12-25 23:41:27
3,737 3
3
  • 3
博主

一位佛系的前端开发者,略通摄影,乐于尝试新事物,热衷于美食。

友链
故事胶片
公众号
坚果大叔 执行上下文 卖坚果的怪叔叔 Dacking
Copyright © 2017-2025 坚果大叔

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 闲言碎语
  • 技术
  • 生活
  • 记录
  • 朋友
  • 热点新闻
  • 常用代码
  • 工具箱
  • 关于
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
321
文章
134
评论
374
喜欢