没问题！Fabric.js的TextBox组件本身就支持富文本样式，不需要创建多个组件。你可以通过操作单个字符的样式来实现同一个TextBox里的多种字体、颜色、字号等效果，下面是具体的实现方案：

核心原理 #

Fabric.js的TextBox继承自Text类，内部会将文本拆分成单个字符存储，每个字符都可以单独设置样式属性（比如字体、颜色、大小）。我们可以通过官方提供的setSelectionStyles方法，或者直接操作内部的字符数据来实现样式自定义。

完整代码示例 #

var canvas = new fabric.Canvas('c'); 
var textbox = new fabric.Textbox('Test', { 
  left: 50, 
  top: 50, 
  width: 150, 
  fontSize: 20,
  fontFamily: 'Arial' // 设置默认字体
}); 

// 给第2个字符（索引1，"e"）应用Georgia字体和更大字号
textbox.setSelectionStyles({
  fontFamily: 'Georgia',
  fontSize: 28
}, 1, 2); // 选区范围：start=1，end=2（左闭右开，仅选中索引1的字符）

// 给第3个字符（索引2，"s"）设置红色填充
textbox._textLines[0].chars[2].style = {
  fill: '#ff0000'
};

// 给第4个字符（索引3，"t"）设置加粗和下划线
textbox.setSelectionStyles({
  fontWeight: 'bold',
  underline: true
}, 3, 4);

// 更新组件坐标并重新渲染画布
textbox.setCoords();
canvas.add(textbox).setActiveObject(textbox);
canvas.renderAll();

关键方法与操作说明 #

• setSelectionStyles(styles, startIndex, endIndex)：这是官方推荐的方法，用于给指定索引范围内的字符批量应用样式。参数说明：
  • styles：要设置的样式对象，支持所有Text组件的样式属性（如fontFamily、fontSize、fill、fontWeight等）
  • startIndex：选区起始字符的索引（从0开始）
  • endIndex：选区结束字符的索引（左闭右开，即不包含该索引的字符）
• 直接操作内部字符数据：TextBox的_textLines数组存储了每一行的文本数据，每行的chars数组包含单个字符的信息，通过修改char.style可以单独设置某个字符的样式。注意这是内部属性，虽然在现有版本中稳定可用，但如果Fabric.js版本更新，可能需要留意API变化。
• 渲染更新：修改样式后，需要调用canvas.renderAll()来让画布重新渲染，确保样式生效。

额外注意事项 #

• 如果TextBox包含多行文本，需要对应到_textLines的对应行（比如第二行的字符在textbox._textLines[1].chars中）
• 支持的样式属性和普通Text组件一致，包括但不限于：fontFamily、fontSize、fill、fontWeight、fontStyle、underline、linethrough、textBackgroundColor
• 如果需要实现用户交互（比如选中部分文本后修改样式），可以结合textbox.getSelectionStart()和textbox.getSelectionEnd()方法获取用户选区，再调用setSelectionStyles应用样式

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