Fabric.js 文本 fontFamily 属性

Fabric.js 是一个基于 HTML5 canvas 的开源绘图库，它提供了丰富的 API 接口，可以帮助开发者快速地开发出交互式的绘图界面。其中，文本是常用的绘图元素之一，它可以使用 Fabric.js 的 Text 类进行创建，并使用 fontFamily 属性指定所使用的字体。

fontFamily 属性

fontFamily 属性是指定文本字体的属性，它通常是一个字符串类型，指定要使用的字体类型。在 Fabric.js 中，可以使用 setFontFamily() 方法设置文本的字体，也可以在 Text 对象的构造函数中使用 fontFamily 属性进行设置。

以下是一个使用 setFontFamily() 方法设置文本字体的示例代码：

var canvas = new fabric.Canvas("canvas");

var text = new fabric.Text("Hello World", {
  left: 100,
  top: 100,
  fontSize: 24,
});

text.setFontFamily("Arial");

canvas.add(text);

这段代码创建了一个 Canvas 对象，并在 Canvas 上添加了一个文本对象。其中，使用 setFontFamily() 方法将文本字体设置为 "Arial"。

另外，可以在 Text 对象的构造函数中使用 fontFamily 属性进行设置，以下是一个示例代码：

var canvas = new fabric.Canvas("canvas");

var text = new fabric.Text("Hello World", {
  left: 100,
  top: 100,
  fontSize: 24,
  fontFamily: "Arial",
});

canvas.add(text);

这段代码与上一个示例代码的作用相同，只是使用了 fontFamily 属性进行设置。

支持的字体

Fabric.js 支持多种类型的字体，包括系统字体和 Google Fonts 等网络字体。以下是一些 Fabric.js 支持的常用字体：

| 字体 | 字体名称 | | ----------- | ------------------- | | Arial | "Arial" | | Helvetica | "Helvetica" | | Times New Roman | "Times New Roman" | | Courier New | "Courier New" | | Georgia | "Georgia" | | Palatino | "Palatino" | | Verdana | "Verdana" | | Comic Sans MS | "Comic Sans MS" |

此外，还可以使用 Google Fonts 等网络字体，例如：

text.setFontFamily("Open Sans");

这里将文本字体设置为了 "Open Sans"，这是一种常见的网络字体。

总结

本文介绍了 Fabric.js 中文本对象的 fontFamily 属性，可以通过该属性设置文本所使用的字体。Fabric.js 支持多种类型的字体，包括系统字体和网络字体，开发者可以根据需要选择适当的字体。