Fabric.js 如何改变文本画布的字体

在本文中，我们将看到如何使用FabricJS更改文本画布的字体。画布意味着文本可以移动，并可以根据需求进行拉伸。此外，文本本身无法像文本框一样进行编辑。

为了实现这一点，我们将使用一个名为FabricJS的JavaScript库。在使用CDN导入库之后，我们将在body标签中创建一个canvas块，其中包含我们的文本。然后，我们将使用FabricJS提供的Canvas和Text实例，并使用fontFamily属性来更改字体，并在示例中将Canvas渲染在Text上。

语法:

fabric.Text(text, fontFamily: string);

参数： 此函数接受上述提到并以下述方式描述的两个参数：

text： 指定要写入的文本。
fontFamily： 指定字体族。

程序： 我们可以使用FabricJS来改变类似画布文本的字体族，如下所示：

<!DOCTYPE html>
<html>
 
<head>
    <title>
        How to change font-family of a 
        canvas-type text with Fabric.js?
    </title>
   
    <!-- Loading the FabricJS library -->
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.2/fabric.min.js">
    </script>
 
    <!-- Loading the Pacifico font family -->
    <link href=
 "https://fonts.googleapis.com/css2?family=Pacifico&display=swap"
          rel="stylesheet">
 
</head>
 
<body>
    <center>
        <canvas id="canvas"
                width="600"
                height="200"
                style="border:1px solid #000000;">
        </canvas>
 
        <script>
       
            // Create a new instance of Canvas
            var canvas = new fabric.Canvas("canvas");
 
            // Create a new Textbox instance
            var text = new fabric.Text('GeeksforGeeks', {
                fontFamily: 'Pacifico'
            });
 
            // Render the Textbox on Canvas
            canvas.add(text);
        </script>
    </center>
</body>
 
</html>

输出：

Fabric.js 如何改变文本画布的字体