دليل HTML

كامل قائمة HTML

خصائص font لـ HTML canvas

font هي الخاصية التي تصف النمط الحالي للخط عند رسم النص باستخدام API Canvas 2D، وتستخدم نفس القيم النصية كما في معايير font CSS.

دليل مرجعي لـ HTML canvas

مثال عبر الإنترنت

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

مثال

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>استخدام خاصية font لـ HTML canvas - دليل أساسي (oldtoolbag.com)</title>
</head>
<body>
<canvas id="myCanvas" width="300" height="150" style="border:1px solid #d3d3d3;">
متصفحك لا يدعم علامة HTML5 canvas.
</canvas>
<script>
var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.font="30px Arial";
ctx.fillText("دليل أساسي oldtoolbag.com",10,50);
</script>
</body>
</html>

اختبار لمعرفة ‹/›

متوافق مع المتصفحات

IEFirefoxOperaChromeSafari

يدعم Internet Explorer 9،Firefox،Opera،Chrome وSafari خاصية font الخصائص.

ملاحظة:Internet Explorer 8 وما قبلها لا يدعم عنصر <canvas>.

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

تعيين أو إرجاع خصائص النص الحالية على اللوحة.

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

القيمة الافتراضية:	10px sans-serif
نصوص JavaScript:	سياق.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	استخدام الخطوط للوحة حالة النافذة.

دليل مرجعي لـ HTML canvas

HTML: <template> العلامة