قانون @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 اختیاری. تعیین محدوده کدگذاری‌های Unicode که فونت پشتیبانی می‌کند. مقدار پیش‌فرض "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" تنظیم کرد).