在Tmagic Editor中使用自定义字体的实现方法

在Tmagic Editor项目中，用户经常会遇到需要自定义字体的情况。本文将详细介绍如何在项目中正确使用非系统自带字体，特别是通过@font-face引入自定义字体的完整实现方案。

自定义字体配置问题分析

当在Tmagic Editor的样式面板中配置字体选项时，如果直接使用非系统字体如"FZHuoLTJW_Da"，会发现样式不生效。这是因为浏览器无法识别这些非系统内置的字体文件。

解决方案：使用@font-face引入字体

正确的做法是通过CSS的@font-face规则来引入自定义字体。这个规则允许开发者定义自己的字体家族，并指定字体文件的来源。

实现步骤

1. 准备字体文件 首先需要确保拥有字体文件的合法使用权，并将字体文件(通常为.woff/.woff2格式)放置在项目可访问的位置。

2. 在runtime中定义@font-face 在项目的runtime环境(通常是项目的CSS文件或样式模块)中添加如下代码：

@font-face {
  font-family: 'FZHuoLTJW_Da';
  src: url('path/to/your/font-file.woff2') format('woff2'),
       url('path/to/your/font-file.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

3. 配置样式面板 在右侧样式面板的配置中，确保字体选项正确引用了定义的字体家族名称：

{
  type: 'data-source-field-select',
  name: 'fontFamily',
  text: '字体',
  checkStrictly: false,
  dataSourceFieldType: ['string'],
  fieldConfig: {
    type: 'select',
    options: [
      { text: '方正字体', value: 'FZHuoLTJW_Da' },
    ],
  },
}

注意事项

1. 字体文件路径：确保@font-face中指定的字体文件路径正确，且文件可被访问。

2. 字体格式：现代浏览器推荐使用woff2格式，它具有更好的压缩率。同时提供woff格式作为备选。

3. 字体显示策略：font-display: swap可以确保文字在字体加载完成前先显示备用字体，避免布局偏移。

4. 跨域问题：如果字体文件存放在CDN或其他域名下，需要确保配置了正确的CORS头。

5. 性能考虑：自定义字体会增加页面加载时间，建议只引入实际使用的字体变体和字符集。

通过以上步骤，就可以在Tmagic Editor项目中成功使用自定义字体了。这种方法不仅适用于示例中的方正字体，也适用于任何需要引入的自定义字体家族。