Question

在查看问题时，我从未找到对上述内容的明确答案。我想要一种适用于几乎所有平台的方法。所以为了社区的利益，我想我会分享我在使用自定义字体在画布上工作的成功。我的主要问题是，什么是让所述字体工作的万无一失的方法？我尝试了多种方法，比如只使用CSS样式表，但它比这复杂一点。这是我发现的：

Answer 1

虽然它还没有完全支持，但您现在可以使用FontFace API在画布上使用它们之前显式加载字体。

.circle-text{
    margin: auto
}

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

Answer 2

我将在下面讨论我的代码。首先，我的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函数，以便在我尝试获取其Id和Context之前存在画布。在我的text_handler()函数中，我在一行中定义了字体大小和字体系列，以及我的字体颜色（白色，因为我有一个黑色画布）。然后在画布中我绘制我的信息，并提供一个x坐标和一个y坐标。可能需要setTimeout();延迟才能使画布有时间加载字体。在我写的测试程序中，实际上我的延迟时间确实很低，尽管100ms几乎不可察觉。另一个关键部分是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

我当然定义了画布中的字体，网页的正文和必要的隐藏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必须在画布实现之前加载字体。这就是为什么我内心有“单词”。

我真的希望这可以帮助别人，因为我根本找不到任何东西。请问我一些问题，告诉我在下面的评论部分我可以做些什么，或者只是简单地简化我的代码。我很感激帮助和建设性的批评。谢谢，快乐的画布......

Answer 3

可能会丢失的重要一点是，必须通过设置canvas元素的font-family style-attribute来加载画布上使用的每个字体。

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

<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？

3 个答案: