目录
在现代 Web 编辑器中，自定义字体对于提升视觉效果和优化用户体验至关重要。无论是构建企业级文档平台，还是在现有 Web 应用中集成在线编辑器，字体的选择都会直接影响内容的可读性、品牌一致性以及整体使用体验。
Spire.OfficeJS 是一款功能强大的浏览器端 Office 解决方案，支持开发者将 Word、Excel、PowerPoint 等文档编辑能力直接嵌入到 Web 应用中，无需依赖本地 Office 环境。它既支持通过产品包脚本进行直接部署，也可以集成到 React、Vue、Angular 等主流前端框架中使用。
在实际项目中，编辑器虽然内置了一些默认字体，但往往无法满足品牌定制或多语言场景的需求，因此通常需要引入自定义字体。基于这一点，本文将从两个方面进行讲解：一是如何通过产品包脚本添加自定义字体，二是如何在前端框架中完成字体集成，从而实现更加灵活、完整的应用方案。
第一部分：基于产品包部署自定义字体
如果你是直接使用产品包方式部署编辑器，那么添加字体的流程会相对简单。本部分将分别介绍在 Windows 和 Linux 系统中的操作方法。
下载 Spire.OfficeJS 产品包
首先，请确保你已经在本地下载了 Spire.OfficeJS 产品包。如果尚未下载，可以前往官方渠道获取并保存到本地，以便后续正常使用。
Windows 系统
基于 Windows 的部署环境，可以按照以下步骤操作：
步骤 1：添加字体文件
将需要使用的字体文件复制到服务器目录下的 generateFonts\fonts 文件夹中。
步骤 2：运行字体生成脚本
返回到 OfficeJS 产品包目录，双击运行 run_genallfonts.bat 脚本。该脚本会将新字体注册到编辑器服务中，等待脚本执行完成即可。
步骤 3：刷新编辑器
脚本执行完成后，在浏览器中打开编辑器页面，并按下 Ctrl + F5 强制刷新。此时，新添加的字体就可以在编辑器中正常显示了。
Linux (x86_64) 系统
在 Linux 环境下运行字体脚本前，需要先完成以下准备工作：
步骤 1：安装必要依赖
在执行字体生成脚本之前，请确保系统已安装所需依赖库，例如 libgdiplus 和 libicu。
步骤 2：添加字体文件
将自定义字体文件（如 .ttf 或 .otf）复制到部署服务器的指定目录：generateFonts/fonts。
步骤 3：执行字体生成脚本
运行 run_genallfonts.sh 脚本，在 Linux 环境中生成字体文件。
步骤 4：启动或刷新编辑器
脚本执行完成后，在浏览器中打开或刷新编辑器，即可查看新添加的字体。
第二部分：在 React 等前端框架中添加自定义字体
对于使用 Vue、React 或 Angular 等现代前端框架的开发者，可以将生成好的字体直接集成到 Web 应用中。本教程以 React 为例进行说明。
你可以参考该教程开始在 React 项目中集成 Spire.OfficeJS：Spire.OfficeJS 接入 React 框架指南。
在 React 框架中集成字体的具体步骤如下：
步骤 1：生成字体文件
按照上文在 Windows 或 Linux 环境中的流程，先完成字体生成。
步骤 2：替换字体文件夹
找到生成字体所在目录 web/fontsweb，删除前端项目中原有的 fontsweb 文件夹，然后将新的 fontsweb 文件夹复制到项目目录中。
步骤 3：更新脚本文件
执行第一部分提到的 genallfonts.bat，然后将生成的 SupFonts.js（位于 web > service > spirecommon 目录下）复制到项目中，以确保编辑器能够识别新增字体。
步骤 4：更新字体缩略图
将 fonts_thumbnail.png 和 该Email地址已收到反垃圾邮件插件保护。要显示它您需要在浏览器中启用JavaScript。复制并替换到项目对应目录中。
步骤 5：刷新浏览器
启动 Web 应用并刷新页面，确认编辑器中已成功显示所有新添加的字体。
常见问题与排查建议
在为编辑器添加自定义字体后，建议遵循一些最佳实践，以确保在服务器端和前端环境中都能稳定运行。良好的文件管理和充分的验证，可以有效避免多字体场景或跨浏览器部署时出现的问题。
以下是常见问题及对应建议：
- **规范字体文件管理：**保持清晰的目录结构，例如服务器端使用 generateFonts/fonts，前端项目使用 web/fontsweb，避免文件缺失或混乱。
- **使用版本控制：**为字体文件进行版本管理，防止被意外覆盖，并确保不同版本之间的一致性。
- **多浏览器测试：**字体在 Chrome、Firefox、Safari 和 Edge 中的显示效果可能存在差异，建议逐一进行检查。
- **确认依赖环境：**在 Linux 系统中运行脚本前，请确保已安装所需依赖（如 libgdiplus、libicu），避免执行失败。
- **检查字体文件完整性：**如果仍然存在问题，可能是部分字体文件损坏或不兼容。建议分批添加字体，以便定位并移除有问题的文件。
总结
在 Spire.OfficeJS中添加自定义字体，是提升 Web 编辑器视觉效果和使用体验的一个简单而高效的方法。无论是在 Windows / Linux 环境中通过脚本生成字体，还是在 React 等前端框架中进行集成，都可以帮助你打造更加统一、专业的编辑体验。
通过规范文件管理、进行跨浏览器测试以及谨慎处理字体资源，可以有效避免常见问题，确保系统稳定运行。现在就开始添加你的自定义字体，让编辑器拥有更灵活、更具品牌特色的排版能力。
许可证申请
如果你希望去除生成文档中的试用提示或解除功能限制，可以联系我们申请一个为期 30 天的临时许可证。
