<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="../fabric.js"></script> <script src="./fontfaceobserver.js"></script> <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Pacifico&display=swap"> <title>Document</title> </head> <body> <canvas id="canvas" width="600" height="600" style="border: 1px dotted #adadad;"> </canvas> <script> var font = new FontFaceObserver('Pacifico', {}) font.load().then(function() { //這里判斷字體是否正常引入 console.log("Font is available") var canvas = new fabric.Canvas("canvas")
//設置字體 var text = new fabric.Textbox('A Computer Science Portal', { width: 400, fontFamily: 'Pacifico' }); canvas.add(text) canvas.centerObject(text) }, function() { console.log('Font is not available') }) </script> </body> </html>
引入字體監測js https://www.npmjs.com/package/fontfaceobserver 解決頁面首次打開字體無效果問題，使用方法如↓
↓設置字體
var text = new fabric.Textbox('A Computer Science Portal', { width: 400, fontFamily: 'Pacifico' });