قانون @font-face CSS

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

با استفاده از قوانین @font-face، طراحان وب دیگر نیازی به استفاده از فونت‌های "امن" ندارند.

در قوانین @font-face، ابتدا باید نام فونت را تعریف کنید (مثلاً myFirstFont) و سپس به فایل فونت اشاره کنید.

توضیح:URL فونت باید با حروف کوچک باشد. حروف بزرگ ممکن است در IE نتایج غیرمنتظره‌ای ایجاد کند!

برای استفاده از فونت در عناصر HTML، نام فونت را از طریق ویژگی font-family مراجعه کنید (myFirstFont):

div {
  font-family: myFirstFont;
}

لطفاً به: مراجعه کنید

تدریس CSS:CSS وب فونٹ

مثال

یک فونت به نام "myFirstFont" مشخص کنید و URL قابل دسترسی آن را تعیین کنید:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

آپ خود سجاوٹ دیکھیئے

مثال‌های بیشتری از TIY در پایین صفحه پیدا کنید.

قوانین CSS

@font-face {
  font-properties
}
فونت-ویژگی‌ها مقدار وصف
font-family name ضروری. تعریف نام فونت.
src URL ضروری. تعریف URL دانلود فونت.
font-stretch
  • normal
  • condensed
  • ultra-condensed
  • extra-condensed
  • semi-condensed
  • expanded
  • semi-expanded
  • extra-expanded
  • ultra-expanded
 اختیاری. فونٹ کو کس طرح سے چھوٹا یا بڑا کردیئے جانا چاہئے کا تعریف کرتا ہے. اصل مقدار "normal" ہے.
font-style
  • normal
  • italic
  • oblique
 اختیاری. فونٹ کی انداز کا تعریف کرتا ہے. اصل مقدار "normal" ہے.
font-weight
  • normal
  • bold
  • 100
  • 200
  • 300
  • 400
  • 500
  • 600
  • 700
  • 800
  • 900
 اختیاری. فونٹ کی کالائی کا تعریف کرتا ہے. اصل مقدار "normal" ہے.
unicode-range unicode-range اختیاری. فونٹ کا استعمال کرنے والی اونکوڈ کا رینج کا تعریف کرتا ہے. اصل مقدار "U+0-10FFFF" ہے.

بیشتر مثال

مثال

آپ کو دوسرا @font-face قانون شامل کرنا چاہئے، جس میں تیزی سے نمائش کی جانے والی متن کا وصف شامل ہو:

@font-face {
  font-family: myFirstFont;
  src: url(sansation_bold.woff);
  font-weight: bold;
}

آپ خود سجاوٹ دیکھیئے

فائل "sansation_bold.woff" ایک دوسرا فونٹ فائل ہے، جس میں Sansation فونٹ کی تیزی سے نمائش کی جانے والی حروف شامل ہیں.

جب کبھی فونٹ فیملی "myFirstFont" کا کسی بھی پاراگراف کا تیزی سے نمائش کیا جانا چاہئے تو، براوزر اس کو استعمال کرے گا.

اسی طرح، آپ ایک ہی فونٹ کے لئے متعدد @font-face قوانین قائم کرسکتے ہیں.

براوزر حمایتی

Internet Explorer، Firefox، Opera، Chrome اور Safari، تمام براوزر @font-face قوانین کو استعمال کرتے ہیں.

جداول میں دیکھی جانے والی اعداد، پورا فونٹ فارمات کو پورا حمایتی پہلی براوزر کی نسلیں کا ذکر کرتی ہیں.

فونٹ فارمات
TTF/OTF 9.0* 4.0 3.5 3.1 10.0
WOFF 9.0 5.0 3.6 5.1 11.1
WOFF2 14.0 36.0 39.0 10.0 26.0
SVG نامزدار نہیں نامزدار نہیں نامزدار نہیں 3.2 نامزدار نہیں
EOT 6.0 نامزدار نہیں نامزدار نہیں نامزدار نہیں نامزدار نہیں

* Edge اور IE: فونٹ فارمات صرف "installable" رکھنے پر موثر ہے

* Firefox: دفعہ طور پر غیرفعال ہے، لیکن چلانا جاسکتا ہے (WOFF2 کو استعمال کرنے کے لئے flag کو "true" رکھنا ضروری ہے).