[英]Setting font-weight on Canvas text
我正在嘗試使用 Canvas 元素在圖像上書寫文本。
我已將字體粗細設置為 900,但在移動設備上它沒有顯示。
在桌面上它很好,甚至在響應模式下測試它看起來很好,但是當我讓它上線時,較重的字體粗細不會出現在我的手機上。
我嘗試了Debug JS 的注釋中的代碼片段修改一些特定的 canvas 元素來調試它,我發現由於某種原因ctx.font
只存儲字體大小和字體名稱,而不是字體粗細。
我添加了bold
這個詞,它會存儲它,但不會存儲bolder
或數字值。
有誰知道這里發生了什么?
我已經包含了一個代碼片段和我的調試屏幕截圖,顯示了它如何存儲字體值。
function main() {
// Put template on canvas
ctx.drawImage(img, 0, 0, size, size);
ctx.font = "bold 110px 'Saira Condensed', sans-serif";
ctx.textAlign = "center";
ctx.fillStyle = "#ffffff";
ctx.fillText(number, 325, 290);
}
Chrome 和 Safari 還要求設置font-style以便為font-weight使用數值:
const canvas = document.querySelector( "canvas" ); const ctx = canvas.getContext( "2d" ); // add 'normal' font-style ctx.font = "normal 900 24px Unknown, sans-serif"; ctx.fillText( "bold", 50, 50 ); ctx.font = "24px Unknown, sans-serif"; ctx.fillText( "normal", 150, 50 );
canvas { background: white }
<canvas></canvas>
當我在 Chrome (109.0.5414.87) 上嘗試這個時,編號的字體粗細被轉換為關鍵字。 100 到 600 轉換為“正常”並消失,700 到 900 轉換為“粗體”。
var context = document.createElement("canvas").getContext("2d");
context.font = "100 16px Arial"
console.log(context.font) // prints "16px Arial"
context.font = "700 16px Arial"
console.log(context.font) // prints "bold 16px Arial"
我已將 font-weight 設置為 900,但在移動設備上它不顯示。
在桌面上它很好,甚至在響應模式下測試它看起來也很好
你能檢查那個鏈接嗎? 我不確定它是否與您的問題有關,但它可以提供幫助: https : //www.w3schools.com/html/html_images_picture.asp
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.