如何輕鬆將自定義字體放入HTML5 Canvas？

在審視問題時，我從未找到明確的答案。我想要一種適用於所有平臺的方法。所以爲了社區的利益，我想我會分享我的成功，讓自定義字體在畫布中工作。我的主要問題是，什麼是確保所說字體正常工作的一種方法？我嘗試了多種方法，例如使用CSS樣式表，但比這更復雜一點。以下是我發現的內容：如何輕鬆將自定義字體放入HTML5 Canvas？

來源

2015-03-25 Brendan

可能的重複[如何在HTML5 Canvas元素中使用自定義字體？]（http://stackoverflow.com/questions/2608022/how-can-i-use-custom-fonts-in-an-html5 -canvas-element） – 2016-07-19 04:53:31

我將在下面討論我的代碼。首先，我的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和上下文之前存在畫布。在我的text_handler()函數中，我有一行定義的字體大小和字體系列，以及我的字體顏色（白色，因爲我有一個黑色的畫布）。然後在畫布上畫出我的信息，並提供一個x座標和一個y座標。延遲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

我當然有定義在畫布上的字體，網頁的主體和必要隱藏股利。該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>

如上所述，股利是需要加載的字體之前畫布可以實現它。這就是爲什麼我在裏面有「文字」。

我真的希望這可以幫助別人，因爲我根本找不到任何東西。請問我問題，告訴我在下面的評論部分我可以做些什麼不同，或者只是簡化我的代碼。我會很感激幫助和建設性的批評。感謝和開心的畫布...

來源

2015-03-25 05:35:04 Brendan

我忘了提及的最後一件事。調用'text_handler（）'函數之前可能需要延遲。 – Brendan 2015-03-25 05:36:46

** [this]（https://stackoverflow.com/questions/28591573/how-i-write-an-icon-in-the-context-canvas/28593478#28593478）**適合您的場景？ – K3N 2015-03-25 06:30:43

不錯的工作。您在評論中提到的延遲非常重要。您可以查看@ KenFyrstenberg的鏈接，瞭解如何在代碼嘗試在畫布中使用該字體之前等待字體完全加載。 ;-) – markE 2015-03-25 17:21:55

雖然它還沒有完整的支持，但現在可以使用FontFace API在畫布上使用它們之前顯式加載字體。

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

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

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

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

});

我可以證實，這適用於Chrome 61.0.3163.100，Safari瀏覽器11.0（12604.1.38.1.7），火狐56.0（所有OSX）和Safari的iOS 11.1。

來源

2017-10-15 04:15:12 dave

這是比公認的答案更好的解決方案。 – Kris 2017-11-16 18:16:51

如何輕鬆將自定義字體放入HTML5 Canvas？

回答

相關問題