قانون @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' رکھنا ضروری ہوتا ہے).

  • پچھلے پیما
  • پائیدھی پیم