قاعدة CSS @font-face

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

من خلال استخدام قاعدة @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 است.

هر زمان که یک متن باید به عنوان چاپی نمایش داده شود، مرورگر از آن استفاده می‌کند.

بنابراین، شما می‌توانید چندین قاعده @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").