خصائص الخط على اللوحة

دليل مرجعي لـ Canvas

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

font تحدد أو تعود إلى الخاصية الحالية لخصائص الخط النصية على اللوحة.

font نحو الخاصية التي تستخدمها هو نفسه الخاصية خصائص النص في CSSمماثل.

مثال

كتابة نص على اللوحة، باستخدام حجم النص 40 بكسل، الخط هو "Arial":

browser الخاص بك لا يدعم علامة القناة.

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