CSS @ font-face Rule

حدد خطًا يسمى "myFirstFont" ، وحدد عنوان URL حيث يمكن العثور عليه:

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

المزيد من الأمثلة "جربها بنفسك" أدناه.

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

مع هذه @font-faceالقاعدة ، لم يعد على مصممي الويب استخدام أحد الخطوط "الآمنة للويب" بعد الآن.

في @font-faceالقاعدة ، يجب أولاً تحديد اسم للخط (مثل myFirstFont) ، ثم الإشارة إلى ملف الخط.

لاستخدام الخط لعنصر HTML ، ارجع إلى اسم الخط (myFirstFont) من خلال خاصية font-family:

div {
  font-family: myFirstFont;
}

و @font-faceيتم دعم حكم في الحافة، كروم، فايرفوكس، وسفاري، وأوبرا.

@font-face {
  font-properties
}

Font descriptor	Values	Description
font-family	name	Required. Defines the name of the font.
src	URL	Required. Defines the URL(s) where the font should be downloaded from
font-stretch	normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded	Optional. Defines how the font should be stretched. Default value is "normal"
font-style	normal italic oblique	Optional. Defines how the font should be styled. Default value is "normal"
font-weight	normal bold 100 200 300 400 500 600 700 800 900	Optional. Defines the boldness of the font. Default value is "normal"
unicode-range	unicode-range	Optional. Defines the range of unicode characters the font supports. Default value is "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 للخط نفسه.