Thuộc tính phông chữ canvas

Tài liệu tham khảo Canvas

Định nghĩa và cách sử dụng

font thuộc tính thiết lập hoặc trả về thuộc tính phông chữ hiện tại của văn bản trên canvas.

font Cú pháp sử dụng của thuộc tính Thuộc tính font trong CSSCùng nhau.

Mô hình

Viết một đoạn văn bản 40 pixel trên canvas, sử dụng phông chữ "Arial":

Trình duyệt của bạn không hỗ trợ thẻ canvas.

JavaScript:

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

Thử ngay

Cú pháp

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

Giá trị thuộc tính

Giá trị Mô tả
font-style

Định nghĩa phong cách của phông chữ. Giá trị có thể:

  • normal
  • italic
  • oblique
font-variant

Định nghĩa biến thể của phông chữ. Giá trị có thể:

  • normal
  • small-caps
font-weight

Định nghĩa độ dày của phông chữ. Giá trị có thể:

  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
font-size / line-height Định nghĩa kích thước và độ cao dòng, tính theo pixel.
font-family Định nghĩa họ phông.
caption Sử dụng phông chữ cho các điều khiển tiêu đề (ví dụ: nút, danh sách thả xuống...).
icon Sử dụng phông chữ để đánh dấu biểu tượng.
menu Sử dụng phông chữ trong các menu (danh sách thả xuống và danh sách menu).
message-box Sử dụng phông chữ trong các hộp thoại.
small-caption Sử dụng phông chữ để đánh dấu các điều khiển nhỏ.
status-bar Sử dụng font cho thanh trạng thái của cửa sổ.

Chi tiết kỹ thuật

Giá trị mặc định: 10px sans-serif

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ thuộc tính này hoàn toàn.

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

Chú ý:Internet Explorer 8 và các phiên bản sớm hơn không hỗ trợ phần tử <canvas>.

Tài liệu tham khảo Canvas