畫布字體被明確分配時被忽略

我正在畫布上繪製文本。問題是ctx.font =字體被完全忽略並將默認設置爲10px sans-serif。這是我的功能。畫布字體被明確分配時被忽略

function drawResTexts(num) { 
        var num = num || ""; 
        var font = (resTxtStyle["font-style"+num] != 
undefined ? resTxtStyle["font-style"+num] : "normal") + " " + resTxtStyle["font-size"+num] + "px " + resTxtStyle["font"+num]; 

        ctx.font = font; // This line has no effect whatsoever 

        ctx.textAlign = resTxtStyle["align"+num] || "left"; 
        var txtArr = resTxt.split("\n"); 

        for (var i = 0; i < txtArr.length; i++) { 
         if (resTxtStyle["stroke"+num] != undefined) { 
          var stroke = resTxtStyle["stroke"+num].split(" "); 
          ctx.strokeStyle = stroke[1]; 
          ctx.lineWidth = Number(stroke[0]) * 2; 
          ctx.strokeText(txtArr[i], resTxtStyle["pos"+num][0], resTxtStyle["pos"+num][1]); 
         } 
         ctx.fillStyle = resTxtStyle["color"+num]; 
         ctx.fillText(txtArr[i], resTxtStyle["pos"+num][0], resTxtStyle["pos"+num][1] + i * (resTxtStyle["line-height"+num] || 0)); 
        } 
       }

然後我用drawText（）調用這個函數;

字體變量是"regular 45px Georgia"

這裏是我的resTxtStyle OBJ

resTxtStyle = { 
      "align": "center", 
      "font": "Georgia", 
      "font-size": "45", 
      "font-style": "regular", 
      "color": "#FFFF4C", 
      "stroke": "2 #000" 
}

有人可以請幫助？

我在這裏看到類似的問題，但在這裏 - http://www.tenpay.tech/questions/2162612/html-5-canvas-font-being-ignored但是在這裏canvas.getContext被再次調用，重新設置字體，但在我的情況下沒有這種情況。

幫助將不勝感激。

來源

2017-10-15 Abhay Srivastav

事實證明，字體應該是「普通45px格魯吉亞」。它的奇怪之處在於每個圖形軟件都使用「常規」字體樣式。可能有人會得到這個幫助。

來源

2017-10-15 02:36:13

是的canvas'font'屬性需要一個有效的CSS'font'速記值，其中* standard *'font-weight'被稱爲'normal'，這也是一個非常常見的名稱，也被稱爲* regular *或* *平原。請注意，如果您不喜歡這些名稱，則還可以使用[TrueType數字體重比例]（https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight#Common_weight_name_mapping）。而你的斷言*「每一個圖形軟件使用」常規「*」都是誤導：他們使用字體設計師給他們的名字。例如，在我的OSX默認* Tahoma *是*正常*，並*薩沃伊LET *它是*普通*。 – Kaiido

好的，謝謝你糾正我。 –

畫布字體被明確分配時被忽略

回答

相關問題