الخطوط على الويب CSS

قاعدة CSS @font-face

الخطوط على الويب تسمح للمصممين على الويب باستخدام الخطوط غير المثبتة على حواسيب المستخدمين.

بعد العثور/شراء الخطوط التي ترغب في استخدامها، يكفي أن تشمل ملفات الخطوط على خادم الويب الخاص بك، وسينزلها المستخدمون تلقائيًا عند الحاجة.

خطوطك “الخاصة” في CSS @font-face تعريفها في القواعد.

تنسيقات الخطوط المختلفة

خطوط TrueType (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 ويستخدم كخط مضغوط في الصفحات الإلكترونية.

دعم المتصفحات لتنسيق الخط

توضح الأرقام في الجدول الأولى لأول إصدار من المتصفح يدعم تنسيق الخط بشكل كامل.

تنسيق الخط
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 لا يدعم لا يدعم لا يدعم لا يدعم

*IE:يكون تنسيق الخط صالحًا فقط عند تعيينه إلى "installable".

*Firefox:لا يدعم بشكل افتراضي، لكن يمكنك تمكينه (إذا كنت تريد استخدام WOFF2، يجب تعيين العلامة إلى "true").

استخدم الخط الذي تحتاجه

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

نصيحة:يجب دائمًا استخدام الأحرف الصغيرة في URLات الخط. قد تؤدي الأحرف الكبيرة إلى نتائج غير متوقعة في IE.

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

مثال

@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 جميع وصفات الخط (font descriptor) المحددة داخل القاعدة:

وصف المفردات القيمة وصف
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".