如何轻松地将自定义字体放入 HTML5 Canvas？

Question

在浏览问题时，我从未找到上述问题的明确答案。我想要一种适用于几乎所有平台的方法。因此，为了社区的利益，我想分享我在 canvas 中使用自定义字体的成功经验。我的主要问题是，什么是让上述字体正常工作的可靠方法？我尝试了多种方法，例如只使用 CSS 样式表，但它比这复杂一点。这是我的发现：

Answer 1

我将在下面讨论我的代码。首先，我的 Javascript:

window.onload = function start() {
            canvas = document.getElementById('canvas1');
            C_Width = canvas.width;
            C_Height = canvas.height;
            cxt = canvas.getContext('2d');
            setTimeout(text_handler,200);
        }

        function text_handler() {
        console.log('made it!');
        cxt.font="20px myFont";//font size and then font family.
        cxt.fillStyle="white"; //color to be seen on a black canvas, default is black text
        cxt.fillText("TEST",(C_Width/2-200),C_Height/2); //cxt.fillText("message",x_coord,y_coord);
        }

请允许我解释一下这是怎么回事。我有一个简单的 window.onload 函数，因此 canvas 在我尝试获取它的 ID 和上下文之前存在。在我的 text_handler() 函数中，我在一行中定义了字体大小和字体系列，以及我的字体颜色（白色，因为我有黑色 canvas）。然后在 canvas 中绘制消息，并提供 x 坐标和 y 坐标。为了给 canvas 加载字体的时间，可能需要 setTimeout(); 延迟。在我写的测试程序中，我实际上把延迟时间降得很低，虽然 100 毫秒几乎不明显。另一个关键部分是 CSS 样式表：

canvas {
            background-color: black; //for white text
            font-family:myFont; //necessary
        }
        #load {
            font-family:myFont; //necessary to load font with div
            visibility: hidden; //makes div invisible but the div element forces the text to load before the canvas.
            height: 0px;
        }
        @font-face {
            font-family:myFont; 
            src: url('./Font_Path.ttf');
            } //self-explanatory

我当然已经在canvas、网页正文中定义了字体，还有一个必要的隐藏div。 div 有助于加载字体。我有样式以使 div 保持不可见，但它仍然起作用。出于某种原因，通过我的测试，我确定 font-family 样式必须在我的 div 中的其他样式之上。当然，你可以使用任何你想要的。当然，我使用 @font-face 作为我的自定义字体。

这是 HTML 的样子：

<body>
    <div id="load">words</div> <!-- load font -->
    <canvas id="canvas1" width="500px" height="500px"></canvas>
</body>

如上所述，div 需要先加载字体，然后 canvas 才能实现它。这就是为什么我在里面有 "words"。

我真的希望这对某人有所帮助，因为我在上面找不到任何东西。请向我提问，在下面的评论部分告诉我我可以做哪些不同的事情，或者只是简化我的代码的简单方法。我会很感激帮助和建设性的批评。谢谢，快乐 Canvas-ing...

Answer 2

更新：此解决方案 now works 适用于除 IE 11 及以下版本以外的所有浏览器。

虽然它没有完全支持，但您现在可以使用 FontFace API 在 canvas.

上使用它们之前显式加载字体

var f = new FontFace('Font name', 'url(/path/to/font.ttf)');

f.load().then(function(font) {

  // Ready to use the font in a canvas context
  console.log('font ready');

  // Add font on the html page
  document.fonts.add(font);

  ctx.font = '48px Font name';
  ctx.strokeText('Hello world', 100, 100);

});

我可以确认这适用于 Chrome 61.0.3163.100、Safari 11.0 (12604.1.38.1.7)、Firefox 56.0（所有 OSX）和 Safari iOS 11.1。

Answer 3

可能会丢失的重要一点是，还必须通过为 canvas 元素设置 font-family style-attribute 来加载在 canvas 上使用的每种字体.

这是我使用 jquery 的版本。就绪事件消除了任何超时的需要。

<head>
 <script src="jquery-3.3.1.min.js"></script>
  <style>
    @font-face {
      font-family: 'AlexBrush';
      src: url('fonts/AlexBrush-Regular.ttf');
    }
    @font-face {
      font-family: 'Pacifico';
      src: url('fonts/Pacifico.ttf');
    }
  </style>
</head>
<body>
  <canvas id='testCanvas' width='1200px' height='800px'></canvas>
  <script>
    $(document).ready(function()
    {
        $('#testCanvas').css('font-family', "AlexBrush");
        $('#testCanvas').css('font-family', "Pacifico");
        var ctx = c.getContext("2d");
        ctx.fillStyle = "#000";
        ctx.font = "100px AlexBrush";
        ctx.fillText('Hello World', 100, 300);
        ctx.font = "100px Pacifico";
        ctx.fillText('Hello World', 100, 500);
    })
  </script>
</body>

如何轻松地将自定义字体放入 HTML5 Canvas？

How do I put custom fonts into HTML5 Canvas easily?

html

javascript

css

canvas