設置html畫布字體

Question

我需要爲My canvas上繪製的所有文本使用Myriad Pro。我通過CSS加載的字體是這樣的：

@font-face { font-family: MyriadProRegular; src: url('/fonts/MyriadPro-Regular.otf'); } 

，並試圖將其設置爲我的畫布是這樣的：

this.context.font = "16pt MyriadProRegular"; 

的問題是，字體沒有被分配 - 我所有的文字變得正確繪製，但字體錯誤。當我將「MyriadProRegular」更改爲任何標準Web字體時，Assingment仍然有效。

我試圖在這兩個職位的所有解決方案和建議： HTML 5 canvas font being ignored， External Font on HTML5 Canvas，但他們都沒有幫助，而且它似乎並沒有任何新的答案會來的舊文章。

我知道我的CSS或字體本身沒有問題 - 我的畫布是在用戶填寫表單並推送開始後通過JS創建的，並且該表單使用Myriad Pro就好了。

如何讓畫布使用我的字體？

Answer 1

我很確定你需要將你的字體文件上傳到你的服務器。然後用字體聲明，它應該工作。