FabricJS俄文字母显示异常求助：创建俄文文本仅显示“!”

嘿，我之前也碰到过FabricJS里俄文显示成感叹号的问题，大概率是这几个原因导致的，给你梳理下：

1. 核心问题：字体不支持西里尔字母 #

FabricJS默认使用的系统字体可能没有包含俄文（西里尔字母）的字形，当渲染不支持的字符时，就会用占位符"!"来替代。

解决办法很直接：

• 确保你指定的字体支持西里尔字母，比如常见的Arial、Times New Roman，或者专门的俄文字体（比如Roboto、Open Sans的西里尔版本）
• 如果你用自定义字体，要先通过CSS的@font-face正确加载：

@font-face {
  font-family: 'RobotoCyrillic';
  src: url('roboto-cyrillic-regular.ttf') format('truetype');
  font-display: swap;
}

• 创建文本对象时明确指定这个字体：

const canvas = new fabric.Canvas('yourCanvasId');
const text = new fabric.Text('Привет, мир!', {
  left: 100,
  top: 100,
  fontFamily: 'RobotoCyrillic', // 或直接用'Arial'
  fontSize: 30
});
canvas.add(text);

2. 编码格式错误 #

如果你的JS文件保存时不是UTF-8编码，俄文字符会被损坏，FabricJS自然无法正确解析。

• 检查你的代码编辑器设置，确保文件编码是UTF-8（大多数编辑器默认是，但有些旧项目可能不是）
• 直接在代码里写俄文字符时，不要手动转义，保持原生的UTF-8字符串即可

3. FabricJS版本兼容性 #

旧版本的FabricJS对非拉丁字符的渲染支持有bug，比如某些早期版本处理西里尔字母时会出现占位符问题。

• 尝试升级到最新的稳定版FabricJS，比如通过npm更新：npm install fabric@latest，或者替换CDN链接为最新版本

额外注意事项 #

• 如果你用CDN加载FabricJS，确保CDN提供的文件本身是UTF-8编码的（主流CDN都没问题，但可以验证下）
• 有些浏览器需要预加载字体，避免渲染时字体未就绪导致的占位符，可以用<link rel="preload">提前加载字体文件：

<link rel="preload" href="roboto-cyrillic-regular.ttf" as="font" type="font/ttf" crossorigin>

内容的提问来源于stack exchange，提问作者Maksim