在FUXA项目中添加自定义字体到SVG编辑器的方法

在FUXA项目中添加自定义字体到SVG编辑器的方法

FUXA Web-based Process Visualization (SCADA/HMI/Dashboard) software 项目地址: https://gitcode.com/gh_mirrors/fu/FUXA

背景介绍

FUXA是一款开源的SCADA/HMI系统，其中的SVG编辑器允许用户创建和编辑矢量图形。默认情况下，编辑器提供了一些内置字体选项，但在实际工业应用中，用户可能需要使用特殊字体（如7段数码管字体等）来满足特定需求。

添加自定义字体的完整步骤

1. 准备字体文件

首先需要获取所需的字体文件（.ttf或.woff格式），建议使用静态字体而非可变字体，因为某些可变字体可能不被完全支持。将字体文件放置在项目的client/src/assets/fonts/目录下。

2. 修改styles.css文件

在client/src/styles.css中添加字体定义。以下是添加7段数码管字体的示例：

@font-face {
    font-family: "7-segment";
    src: local("7-segment"),
        url("./assets/fonts/7segment/7segment.woff") format("woff"),
        url("./assets/fonts/7segment/7segment.ttf") format("truetype");
}

3. 更新字体列表

在client/src/app/_helpers/define.ts文件中，找到static fonts数组，将新字体名称添加到数组中：

static fonts = ['Sans-serif', 'Roboto-Thin', /* 其他默认字体 */, '7-segment'];

4. 重新启动应用

完成上述修改后，需要重新启动FUXA客户端以使更改生效。在开发模式下，可以运行npm start命令。

常见问题排查

1. 字体不显示：确保字体文件路径正确，且文件格式被支持（.ttf或.woff）。

2. 字体应用无效：某些特殊字体可能对字符集或字体大小有限制，尝试使用不同的字符或调整大小。

3. 字体渲染异常：检查是否为静态字体，可变字体可能不被完全支持。

最佳实践建议

1. 优先使用.ttf格式字体，兼容性更好。

2. 添加字体前，先在标准HTML页面中测试字体是否能正常渲染。

3. 对于工业应用中的特殊字体（如数码管字体），确保其支持常用字符（0-9）。

4. 考虑字体文件大小，过大的字体文件可能影响加载性能。

总结

通过上述步骤，用户可以轻松地将自定义字体集成到FUXA的SVG编辑器中，扩展了HMI界面设计的灵活性。这一功能特别适用于需要特殊字体显示的工业应用场景，如数字仪表盘、特殊标识等。在实际操作中，选择合适的字体文件并确保其兼容性是成功的关键。

FUXA Web-based Process Visualization (SCADA/HMI/Dashboard) software 项目地址: https://gitcode.com/gh_mirrors/fu/FUXA