قاعدة CSS @font-face
التعريف والاستخدام
من خلال استخدام قاعدة @font-face، لا يحتاج مصممو الويب إلى استخدام أي خط "آمن".
في قاعدة @font-face، يجب عليك أولاً تعريف اسم الخط (مثل myFirstFont) ثم تشير إلى ملف الخط.
نصيحة:استخدام عنوان URL للخط بالأحرف الصغيرة. قد يؤدي الأحرف الكبيرة إلى نتائج غير متوقعة في IE!
لإضافة الخط إلى عنصر HTML، استخدم خاصية font-family لاستدعاء اسم الخط (myFirstFont):
div {
font-family: myFirstFont;
}
انظر أيضًا:
دليل CSS:كتابة Web 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". |
| font-style |
|
اختياري. يعرف نمط الخط. القيمة الافتراضية هي "normal". |
| font-weight |
|
اختياري. يعرف سمك الخط. القيمة الافتراضية هي "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: بشكل افتراضي معطوف، ولكن يمكن تمكينه (يحتاج إلى إعداد flag على "true" لاستخدام WOFF2).
