draw.io字体不显示中文怎么办？

Question

在使用 draw.io（现称 diagrams.net）绘制流程图时，部分用户遇到中文文本无法正常显示的问题，表现为中文字符空白、乱码或被英文字体替代。该问题通常出现在桌面客户端或某些浏览器中，主要原因是系统或应用未正确加载支持中文的字体，或 draw.io 默认字体设置不包含中文字体。此外，导出为 PNG 或 PDF 时若未嵌入字体，也可能导致中文丢失。解决方法包括：手动将字体设置为“Microsoft YaHei”“SimSun”“PingFang SC”等常见中文字体；确保操作系统已安装中文语言包；优先使用在线版 diagrams.net，其对中文字体兼容性更好；导出时选择“嵌入字体”选项以保留中文显示。

Answer 1

一、问题现象：draw.io 中文显示异常的典型表现

在使用 draw.io（现称 diagrams.net）绘制流程图时，部分用户反馈中文文本无法正常显示。具体表现为：

• 中文字符显示为空白区域，仅保留字符占位；
• 出现乱码或方框“□□□”替代原汉字；
• 系统自动将中文字体替换为英文字体（如 Arial），导致排版错乱；
• 导出为 PNG 或 PDF 后，中文内容完全丢失。

该问题多发于桌面客户端（基于 Electron 构建）或某些浏览器环境（如旧版 Edge、Firefox 未启用字体子集支持），尤其在非中文操作系统环境下更为显著。

二、根本原因分析：从底层机制理解字体渲染问题

draw.io 基于 HTML5 和 JavaScript 渲染图形，其文本显示依赖浏览器或运行环境的字体管理系统。以下是导致中文异常的核心因素：

1. 默认字体栈不包含中文字体：draw.io 默认使用 sans-serif 字体族，若系统未配置合适的 fallback 字体，则无法匹配到可用的中文字体。
2. 本地系统缺少中文字体文件：Linux 或精简版 Windows 系统可能未预装 “Microsoft YaHei”、“SimSun”、“PingFang SC” 等常见中文字体。
3. 字体加载策略限制：桌面客户端由于沙箱机制，可能无法访问系统全部字体资源。
4. 导出过程未嵌入字体：生成 PNG/PDF 时若未启用“嵌入字体”选项，目标设备无对应字体即无法还原中文。

三、解决方案全景图：由浅入深的技术应对策略

层级	方法	适用场景	实施难度
初级	手动设置中文字体	编辑界面即时修复	★☆☆☆☆
中级	安装系统级中文字体	长期稳定使用	★★★☆☆
高级	修改 draw.io 配置文件 font-families	批量部署/企业环境	★★★★☆
专家级	自定义 build 并打包字体子集	私有化部署需求	★★★★★

四、实操步骤详解

4.1 编辑器内字体切换（快速响应）

选中文本节点，在顶部工具栏将字体更改为以下任意一种：

Microsoft YaHei
SimSun
PingFang SC
Hiragino Sans GB
Noto Sans CJK SC

推荐优先选择跨平台兼容性较好的 “Noto Sans CJK SC”，由 Google 提供，支持全 Unicode 中文字符集。

4.2 操作系统字体补全（根治方案）

以 Linux Ubuntu 为例，执行以下命令安装中文字体包：

sudo apt update
sudo apt install fonts-noto-cjk fonts-wqy-zenhei fonts-liberation2
sudo fc-cache -fv
    

Windows 用户可通过控制面板 → 区域与语言 → 添加中文语言包，确保“东亚语言支持”已启用。

4.3 导出设置关键点

导出图像前，请务必勾选：

• PNG 导出 → “Embed fonts”
• PDF 导出 → “Vector format” + “Embed images and fonts”

此操作可确保目标文档携带所需字形数据，避免因环境差异造成回显失败。

五、架构建议：面向企业的部署优化

对于 IT 团队统一管理的组织，建议采用如下 Mermaid 流程图所示的标准化处理路径：

graph TD
            A[用户提交含中文图表] --> B{是否使用在线版?}
            B -- 是 --> C[自动匹配云端字体服务]
            B -- 否 --> D[检查本地字体库]
            D --> E[缺失中文字体?]
            E -- 是 --> F[推送字体安装脚本]
            E -- 否 --> G[验证 draw.io 配置]
            G --> H[启用嵌入式导出策略]
            H --> I[归档并分发]

六、进阶调试技巧

开发者可通过 Chromium DevTools 监控字体加载情况：

1. 打开桌面客户端，按 F12 进入开发者模式；
2. 切换至 “Rendering” 面板，启用 “Show layout boundaries”；
3. 查看控制台是否有 “Failed to load font” 警告；
4. 通过 document.fonts.check('16px "Microsoft YaHei"') 验证字体可用性；
5. 利用 window.getComputedStyle(element).fontFamily 获取实际渲染字体。

此外，可在启动参数中加入 --disable-web-security --allow-file-access-from-files（仅测试环境）以排除 CORS 对字体加载的影响。