问题：draw.io如何正确添加中文字体宋体？

Question

**问题描述：** 在使用 draw.io（现称 diagrams.net）进行流程图设计时，用户常遇到中文显示异常的问题，尤其是无法正确应用宋体（SimSun）等中文字体。由于 draw.io 默认字体库中不包含中文字体，直接选择宋体可能导致文字显示为方框或默认英文字体，影响图表美观与可读性。因此，如何在 draw.io 中正确添加并使用中文字体宋体，成为一个常见且关键的技术问题。解决该问题需从字体配置、资源引入及使用方式等多方面入手，确保中文在图表中正常渲染与导出。

Answer 1

一、问题背景与现象分析

在使用 draw.io（现称 diagrams.net）进行流程图设计时，用户常遇到中文显示异常的问题，尤其是无法正确应用宋体（SimSun）等中文字体。由于 draw.io 默认字体库中不包含中文字体，直接选择宋体可能导致文字显示为方框或默认英文字体，影响图表美观与可读性。

这一问题的根本原因在于 draw.io 本身并不内置中文字体库，其默认支持的字体多为英文字体如 Arial、Helvetica、Times New Roman 等。因此，在处理包含中文的图表时，必须通过自定义字体配置来引入中文字体资源。

二、问题定位与影响范围

• 问题定位： draw.io 无法识别或加载本地中文字体，如宋体（SimSun）、黑体（SimHei）等。
• 影响范围： 所有使用 draw.io 的中文用户，尤其是在图表中需要使用特定中文字体进行排版和展示的场景。
• 表现形式： 中文字符显示为方框、问号，或被自动替换为默认英文字体。

该问题在浏览器端和桌面客户端均存在，尤其在跨平台导出 PDF、PNG 等格式时更为明显。

三、解决方案概述

解决 draw.io 中文显示问题的核心思路是：

1. 引入中文字体文件（如 SimSun.ttf）至 draw.io 的字体库。
2. 通过配置文件或插件机制注册新字体。
3. 在图表编辑器中选择并应用新字体。
4. 确保导出图表时字体嵌入，避免显示异常。

以下将从字体准备、配置修改、使用方式三个层面展开详细说明。

四、字体准备与资源获取

首先，需获取所需的中文字体文件（如宋体 SimSun.ttf），常见获取方式如下：

字体名称	文件名	获取方式
宋体	SimSun.ttf	Windows系统字体目录 C:\Windows\Fonts
黑体	SimHei.ttf	同上
微软雅黑	Microsoft YaHei.ttf	Windows系统或字体网站下载

注意：在使用字体前应确认其版权许可，确保在 draw.io 中使用是合法的。

五、字体配置与集成方法

draw.io 支持通过修改配置文件来添加自定义字体。以下是具体步骤：

1. 在 draw.io 安装目录或配置目录中找到并编辑 drawio-config.js 或 mxClient.js 文件。
2. 添加字体定义，示例如下：

mxResources.get('font') + 'SimSun,SimHei,Microsoft YaHei';
    

或通过自定义插件方式注册字体：

mxGraph.prototype.getCustomFonts = function() {
    return ['SimSun', 'SimHei', 'Microsoft YaHei'];
};
    

此外，也可通过浏览器控制台注入 CSS 字体声明，实现临时字体加载：

@font-face {
    font-family: 'SimSun';
    src: url('SimSun.ttf') format('truetype');
}
    

六、使用与验证流程

完成字体配置后，可在 draw.io 编辑器中选择新添加的字体进行测试。流程如下：

graph TD A[打开 draw.io 编辑器] --> B[导入或新建流程图] B --> C[选中文本内容] C --> D[在字体下拉菜单中选择 SimSun] D --> E[查看文本是否正常显示] E --> F{是否显示异常？} F -- 是 --> G[检查字体路径或配置] F -- 否 --> H[导出图表并验证] H --> I[完成]

导出时建议选择支持字体嵌入的格式（如 PDF），以确保在其他设备上也能正常显示。