خاصية خط لوحة HTML

❮ مرجع قماش HTML

مثال

اكتب نصًا بارتفاع 30 بكسل على اللوحة ، باستخدام الخط "Arial":

لا يدعم متصفحك HTML5canvastag.

جافا سكريبت:

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

دعم المتصفح

تحدد الأرقام الواردة في الجدول إصدار المتصفح الأول الذي يدعم الخاصية بالكامل.

Property
font Yes 9.0 Yes Yes Yes

التعريف والاستخدام

تقوم خاصية الخط بتعيين أو إرجاع خصائص الخط الحالية لمحتوى النص على اللوحة القماشية.

تستخدم خاصية الخط نفس بناء الجملة مثل خاصية الخط CSS .

القيمة الافتراضية: 10 بكسل بلا رقيق
بناء جملة JavaScript: سياق .font = "أحرف صغيرة مائلة غامقة 12 بكسل arial" ؛

قيم الملكية

Values Description Play it
font-style Specifies the font style. Possible values:
  • normal
  • italic
  • oblique
font-variant Specifies the font variant. Possible values:
  • normal
  • small-caps
font-weight Specifies the font weight. Possible values:
  • normal
  • bold
  • bolder
  • lighter
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
font-size/line-height Specifies the font size and the line-height, in pixels
font-family Specifies the font family
caption Use the font captioned controls (like buttons, drop-downs, etc.)
icon Use the font used to label icons
menu Use the font used in menus (drop-down menus and menu lists)
message-box Use the font used in dialog boxes
small-caption Use the font used for labeling small controls
status-bar Use the fonts used in window status bar

❮ مرجع قماش HTML