Fabricjs-文字添加外部字体（初始化字体无效问题解决） 

<!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'
      });

 

posted @ 2022-04-07 10:26  聂小恶  阅读(764)  评论(0)  编辑  收藏  举报