ویژگی فونت کانواس

تعریف و استفاده

font ویژگی برای تنظیم یا بازگرداندن ویژگی‌های فونت محتوای متن روی کانواس است.

font نحوه استفاده از ویژگی‌های خصوصیت font CSSمشابه.

مثال

یک متن 40 پیکسلی روی کانواس بنویسید، از فونت "Arial" استفاده کنید:

مرورگر شما برچسب کانواس را پشتیبانی نمی‌کند.

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

نکته:نسخه‌های 8 و قبل از آن از Internet Explorer از عنصر <canvas> پشتیبانی نمی‌کنند.