Question

我正在尝试在画布中使用我自己的字体，无法使其工作。（浏览器使用默认字体。）

    <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），然后粘贴您{{1}中的代码}}。如果它有效，那么你知道问题是字体加载时间，在这种情况下你只需要在加载字体后才能执行该函数。

请查看How to know if a font (@font-face) has already been loaded?，了解有关如何操作的信息。

在画布中使用我自己的字体

1 个答案: