卖坚果的怪叔叔 卖坚果的怪叔叔
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
首页 › 技术 › 解决Ubuntu下Chrome中文字体混乱问题

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

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

因为涉及到下载报告中有使用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!平平淡淡的一年!
下一篇
在小程序中查看

这是个😊,挣点服务器费用😜

热门文章
日常,下班啊,唉唉唉唉
夏日的周末!
前端每日两三问(20190923)
Vue 安装 vuex sass 和 引入 Jq
Clean-Code-Js
一年一年又一年
专题标签
agent (1) CSS (15) dom (1) Es6入门系列 (14) Git (3) html (1) iview (1) JavaScript (9) js (4) Lif (1) Node (4) pyecharts (1) Python (10) ref (1) scriptable (1) Skill (1) vsCode (1) vue (4) wordpress (2) 三月 (1) 上海 (1) 假期 (1) 其他分享 (3) 前端两三问 (15) 古镇 (1) 外滩 (1) 对象 (1) 小程序 (5) 年度总结 (6) 年终总结 (1) 微信机器人 (4) 打字机 (1) 技术 (1) 日常问题 (8) 日常问题记录 (1) 春天 (2) 服务器 (2) 海族馆 (1) 生活 (8) 网上国网 (1) 记录 (3) 通勤 (1) 重学JavaScript (11) 面试题 (10) 🌸 (1)
什么是Agent?
2026-08-15 23:49:12
429 0 2
什么是 Skill?
2026-08-12 21:32:42
348 1 0
失业在家,我给小朋友做了一个练字小程序!
2026-08-07 16:21:52
690 10 1
上线8年,15万用户的小程序,一共赚了多少钱?
2026-05-30 18:01:24
4,683 4 0
3
  • 3
博主

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

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

开往-友链接力

萌ICP备20230818号

苏ICP备18048410号-3
  • 首页
  • 生活
  • 技术
  • 记录
  • 工具箱
  • 关于我
# CSS # # JavaScript # # vue # # 微信 # # 生活 #
坚果大叔
345
文章
171
评论
432
喜欢