53-الخطوط على الويب باستخدام CSS

قاعدة @font-face في CSS

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

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

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

صيغ مختلفة للخطوط

• خطوط 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 للاستخدام كخطوط مضمنة في صفحات الويب.

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

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

drive_spreadsheetالتصدير إلى “جداول بيانات Google”

*ملاحظة خاصة بإنترنت إكسبلورر: يدعم إنترنت إكسبلورر تنسيق TTF/OTF فقط في حال تعيينه على قابل للتنصيب (“installable”).

*الرموز * في الجدول يعني أن دعم المتصفح لتنسيق الخط غير محدد.

استخدام الخط الذي تريده في CSS

تستخدم قاعدة @font-face في CSS لتحديد واستخدام خطوط غير مثبتة على أجهزة المستخدمين بشكل افتراضي.

اتبع الخطوات التالية لاستخدام الخط الذي تريده:

1. تحديد اسم للخط:
   • داخل قاعدة @font-face، قم أولاً بتعريف اسم للخط الذي ترغب في استخدامه. على سبيل المثال، يمكنك تسميته myFirstFont.
2. تحديد مسار ملف الخط:
   • بعد تحديد اسم للخط، قم بتحديد مسار ملف الخط الذي تريد استخدامه. تأكد من أن ملف الخط موجود على خادم الويب الخاص بك ويمكن الوصول إليه.

نصيحة: من الأفضل دائمًا استخدام الأحرف الصغيرة عند تحديد مسار ملف الخط (URL) وذلك لتجنب حدوث مشاكل غير متوقعة في متصفح إنترنت إكسبلورر (Internet Explorer) عند استخدام الأحرف الكبيرة.

3. استخدام الخط في عنصر HTML:
   • بعد تعريف الخط باستخدام قاعدة @font-face، يمكنك استخدامه لعرض النصوص في عناصر HTML الخاصة بك. للقيام بذلك، قم بالإشارة إلى اسم الخط الذي قمت بتعريفه (مثل myFirstFont) ضمن خاصية font-family الخاصة بالعنصر الذي تريد تطبيق الخط عليه.

على سبيل المثال، لنفترض أنك قمت بتعريف خط باسم myFirstFont وأنه مرتبط بملف موجود على خادم الويب الخاص بك. يمكنك استخدام هذا الخط لعرض نص عنوان (heading) في صفحة HTML كالآتي:

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

div {
  font-family: myFirstFont;
}

استخدام النصوص الغامقة

لاستخدام النصوص الغامقة مع الخط المخصص الذي قمت بتعريفه، تحتاج إلى إضافة قاعدة @font-face أخرى تحتوي على معايير خاصة بالنسخ الغامقة.

في قاعدة @font-face الأساسية، يتم عادةً تحديد ملف الخط العادي (regular font file). أما لاستخدام النصوص الغامقة، نحتاج إلى تحديد ملف منفصل خاص بالنسخة الغامقة للخط.

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

الملف “sansation_bold.woff” هو ملف خط آخر يحتوي على الأحرف الغامقة لخط Sansation.

ستستخدم المتصفحات هذا عندما يتم عرض جزء من النص الذي يحتوي على عائلة الخطوط “myFirstFont” باللون الغامق.

بهذه الطريقة يمكنك الحصول على العديد من قواعد @font-face لنفس الخط.

معايير وصف الخطوط في CSS (ترجمة حرفية)

يحدد الجدول التالي جميع معايير وصف الخطوط التي يمكن تعريفها داخل قاعدة @font-face: