Canvas font attribute

คู่มืออ้างอิง Canvas

คำอธิบายและวิธีใช้

font กำหนดหรือคืนคุณสมบัติของตัวอักษรในกระดานวาด

font ศัพท์การใช้งานของคุณสมบัติ คุณสมบัติ font ของ CSSเหมือนกัน

ตัวอย่าง

เขียนข้อความ 40 พิกเซลบนกระดานวาด โดยใช้ตัวอักษร "Arial":

Your browser does not support the canvas tag.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="40px Arial";
ctx.fillText("Hello World",10,50);

ทดลองด้วยตัวเอง

ศัพท์

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

ค่าของคุณสมบัติ

ค่า รายละเอียด
font-style

กำหนดรูปแบบตัวอักษร

  • normal
  • italic
  • oblique
font-variant

กำหนดแบบที่ตัวอักษรเปลี่ยนแปลง

  • normal
  • small-caps
font-weight

กำหนดความหนาของตัวอักษร

  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
font-size / line-height กำหนดขนาดตัวอักษรและความสูงบรรทัด โดยหน่วยเป็นพิกเซล
font-family กำหนดต้นตัวอักษร
caption ใช้ตัวอักษรสำหรับประกาศหัวข้อ
icon ใช้ตัวอักษรสำหรับไอคอน
menu ใช้ตัวอักษรสำหรับรายการเมนู
message-box ใช้ตัวอักษรสำหรับดาวน์ลูกส์ และรายการเมนู
small-caption ใช้ตัวอักษรสำหรับที่ทำเครื่องมือเล็ก
status-bar ใช้ตัวอักษรสำหรับแถวสถานะของหน้าต่าง

รายละเอียดเทคนิค

ค่าเริ่มต้น： 10px sans-serif

การรองรับโปรแกรมนำ

ตัวเลขในตารางระบุรุ่นที่รองรับคุณสมบัตินี้อย่างเต็มที่

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

หมายเหตุ：Internet Explorer 8 และรุ่นเก่ากว่าไม่สนับสนุนองค์ประกอบ <canvas>

คู่มืออ้างอิง Canvas