خطوط الويب CSS
قاعدة CSS @ font-face
تسمح خطوط الويب لمصممي الويب باستخدام الخطوط غير المثبتة على كمبيوتر المستخدم.
عندما تجد / تشتري الخط الذي ترغب في استخدامه ، ما عليك سوى تضمين ملف الخط على خادم الويب الخاص بك ، وسيتم تنزيله تلقائيًا للمستخدم عند الحاجة.
يتم تحديد الخطوط "الخاصة بك" ضمن @font-faceقاعدة CSS.
تنسيقات خطوط مختلفة
خطوط تروتايب (TTF)
TrueType هو معيار خط تم تطويره في أواخر الثمانينيات من قبل Apple و Microsoft. TrueType هو تنسيق الخط الأكثر شيوعًا لأنظمة تشغيل Mac OS و Microsoft Windows.
خطوط OpenType (OTF)
OpenType هو تنسيق لخطوط الكمبيوتر القابلة للتحجيم. تم إنشاؤه على TrueType ، وهي علامة تجارية مسجلة لشركة Microsoft. تُستخدم خطوط OpenType بشكل شائع اليوم على منصات الكمبيوتر الرئيسية.
تنسيق خط الويب المفتوح (WOFF)
WOFF هو تنسيق خط يستخدم في صفحات الويب. تم تطويره في عام 2009 ، وهو الآن توصية W3C. WOFF هو أساسًا OpenType أو TrueType مع ضغط وبيانات وصفية إضافية. الهدف هو دعم توزيع الخط من خادم إلى عميل عبر شبكة ذات قيود عرض النطاق الترددي.
تنسيق خط الويب المفتوح (WOFF 2.0)
خط TrueType / OpenType الذي يوفر ضغطًا أفضل من WOFF 1.0.
خطوط / أشكال SVG
تسمح خطوط SVG باستخدام SVG كرموز عند عرض النص. تحدد مواصفات SVG 1.1 وحدة خط تسمح بإنشاء خطوط ضمن وثيقة SVG. يمكنك أيضًا تطبيق CSS على مستندات SVG ، ويمكن تطبيق قاعدة @ font-face على النص في مستندات SVG.
خطوط OpenType المضمنة (EOT)
خطوط EOT هي شكل مضغوط من خطوط OpenType المصممة بواسطة Microsoft لاستخدامها كخطوط مضمنة على صفحات الويب.
دعم المستعرض لتنسيقات الخطوط
تحدد الأرقام الواردة في الجدول إصدار المستعرض الأول الذي يدعم تنسيق الخط بشكل كامل.
| Font format | |||||
|---|---|---|---|---|---|
| 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 | Not supported | Not supported | Not supported | 3.2 | Not supported |
| EOT | 6.0 | Not supported | Not supported | Not supported | Not supported |
* IE: تنسيق الخط يعمل فقط عند تعيينه ليكون "قابل للتثبيت".
باستخدام الخط الذي تريده
في @font-faceحكم حدد أولاً اسمًا للخط (على سبيل المثال ، myFirstFont) ثم أشر إلى ملف الخط.
نصيحة: استخدم دائمًا الأحرف الصغيرة لعنوان URL الخاص بالخط. يمكن أن تعطي الأحرف الكبيرة نتائج غير متوقعة في IE.
لاستخدام الخط لعنصر HTML ، ارجع إلى اسم الخط (myFirstFont) من خلال font-familyالخاصية:
مثال
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family: myFirstFont;
}
استخدام النص الغامق
يجب إضافة @font-faceقاعدة أخرى تحتوي على واصفات للنص الغامق:
مثال
@font-face
{
font-family: myFirstFont;
src: url(sansation_bold.woff);
font-weight: bold;
}
الملف "sansation_bold.woff" هو ملف خط آخر ، يحتوي على الأحرف الغامقة لخط Sansation.
ستستخدم المتصفحات هذا كلما تم عرض جزء من النص مع مجموعة الخطوط "myFirstFont" بالخط العريض.
بهذه الطريقة يمكنك الحصول على العديد من @font-faceالقواعد لنفس الخط.
واصفات خطوط CSS
يسرد الجدول التالي جميع واصفات الخطوط التي يمكن تحديدها داخل @font-faceالقاعدة:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| 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 is "normal" |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is "normal" |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is "normal" |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is "U+0-10FFFF" |