HTML canvas font 属性

دليل مرجعي HTML5 Canvas

定义和用法

font 属性设置或返回画布上文本内容的当前字体属性。

font 属性使用的语法与 خصائص النص في CSS相同。

实例

在画布上写一段40像素的文本，使用的字体是"Arial"：

您的浏览器不支持canvas标签。

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>.

دليل مرجعي HTML5 Canvas