HTML canvas font用法及代碼示例

HTML畫布字體屬性用於更改<canvas>元素的Text內容的當前字體係列。字體屬性具有默認屬性，即10px sans-serif

用法:

  context.font="italic small-caps bold 12px arial";

屬性值：

font-family：用於設置HTML元素的字體類型。它包含多個字體名稱作為備用
font-style：用於指定HTML元素的字體樣式。它可以是“正常，斜體或傾斜”。
font-weight：用於設置字體的粗體。其值可以是“正常，加粗，較淺，較粗”。
font-variant：用於創建小寫效果。它可以是“普通或小型股”。
font-size：它用於設置HTML元素的字體大小。 font-size可以通過不同的方式進行設置，例如“像素，百分比，em，也可以設置較小，較大”等值。
caption:使用帶字幕的控件(如按鈕，drop-downs等)
icon:使用用於標記圖標的字體。
menu:使用菜單中使用的字體(下拉菜單和菜單列表)。
message-box：使用對話框中使用的字體。
small-caption：使用用於標記小控件的字體
狀態欄：使用窗口狀態欄中使用的字體。

例：

<!DOCTYPE html> 
<html> 
  
<head> 
    <title> 
      HTML canvas font Property 
  </title> 
</head> 
  
<body style="text-align:center"> 
  
    <h1 style="color:green"> 
      GeeksForGeeks 
  </h1> 
    <h2 style="color:green"> 
      HTML canvas font Property 
  </h2> 
    <canvas id="sudo" 
            width="300"
            height="150"
            style="border:2px solid"> 
  </canvas> 
  
    <script> 
        var c = document.getElementById("sudo"); 
        var ctx = c.getContext("2d"); 
        ctx.font = "40px Arial"; 
        ctx.fillText("GeeksForGeeks", 10, 50); 
    </script> 
  
</body> 
  
</html>

輸出：

支持的瀏覽器：下麵列出了HTML canvas字體屬性支持的瀏覽器：

穀歌瀏覽器
Internet Explorer 9.0
火狐瀏覽器
蘋果Safari
Opera

相關用法

注：本文由純淨天空篩選整理自ManasChhabra2大神的英文原創作品 HTML | canvas font Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。