javascript - 在 Canvas 中使用我自己的字体

Question

我正在尝试在 Canvas 中使用我自己的字体，但无法正常工作。 (浏览器使用默认字体。)

    <style type="text/css">
        @font-face {
            font-family: "typewriter";
            src: url("TravelingTypewriter.ttf") format('truetype');
        }
    </style>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext("2d");
            var image = new Image();
            image.onload = function(){
                context.drawImage(image, 0, 0);
                context.font = "40pt typewriter"
                context.fillText("text", 40, 40);
            };
            image.src = "Open Book.png"; 
        }   
    </script>

我做错了什么？

Answer 1

您的字体可能还没有加载，所以它正在回退到默认值。

检查是否发生这种情况的一种简单方法是在您确定字体已加载几秒钟后打开控制台 (F12)，然后粘贴您在 function 中的代码。如果有效，那么您就知道问题出在字体加载时间上，在这种情况下，您需要仅在字体加载后才执行该函数。

看看How to know if a font (@font-face) has already been loaded?有关如何执行此操作的信息。