| المفهوم أو الصيغة | طريقة العمل والأداء البرمجي | الفائدة وملاحظة الأداء للويب |
|---|---|---|
| font-face | تتيح تحميل واستخدام ملفات خطوط خارجية مخصصة على السيرفر بدلاً من خطوط جهاز المستخدم | تضمن ظهور موقعك ونوفيل بنفس المظهر الجذاب لجميع الزوار على مختلف الأجهزة |
| woff2 | أحدث صيغة لملفات الخطوط وتتميز بأعلى درجة ضغط وأصغر حجم ملف ممكن | المدعومة والأفضل للمتصفحات الحديثة وتوفر سرعة فائقة في تحميل الصفحات |
| woff | الصيغة السابقة لـ woff2 وتعتبر حجمها أكبر قليلاً | تُستخدم كملف احتياطي لدعم المتصفحات والأنظمة القديمة جداً التي لا تفهم الصيغة الحديثة |
| ttf أو otf | ملفات الخطوط العادية المستخدمة على أنظمة التشغيل والبرامج المكتبية | غير مثالية لمواقع الويب لأن حجمها كبير وتستهلك من باقة وبيانات زوار الموقع |
| font-display | خاصية تحدد للمتصفح كيف يتصرف مع النص في الفترة الزمنية التي يتم فيها تحميل ملف الخط | تمنع ظهور الصفحات فارغة وتحسن من سرعة استجابة الموقع وتجربة المستخدم بشكل ملحوظ |
| swap | يعرض نصوص الموقع فوراً بخط النظام الاحترافي الافتراضي ثم يستبدله بالخط المخصص بمجرد اكتمال تحميله | يمنع مشكلة اختفاء النص المؤقت FOIT وهو الوضع الأفضل والموصى به دائماً لسرعة الموقع |
| block | يخفي النص تماماً ويترك مكانه فارغاً حتى يكتمل تحميل ملف الخط المخصص من السيرفر بالكامل | يتسبب في مشكلة اختفاء النص المزعجة FOIT ولا يفضل استخدامه لضمان بقاء الزائر بالموقع |
| وضع الاحتياط والخطوط السريعة | تشمل أوضاع مثل fallback لعرض سريع للخط الاحتياطي أو optional للتحميل فقط في حال كانت إنترنت الزائر قوية وسريعة | تمنح المطور تحكماً مرناً يتناسب مع جودة خطوط الاتصال المختلفة للزوار |
| Google Fonts | مكتبة سحابية شهيرة تتيح استيراد مئات الخطوط الجاهزة مجاناً برابط واحد دون الحاجة لرفع ملفات على سيرفر موقعك | وسيلة سريعة وسهلة جداً تختصر وقت التطوير وتوفر مساحة السيرفر الخاص بك |
**@font-face** يتيح لك تحميل خطوط مخصصة لصفحتك بدلاً من الاعتماد على الخطوط المُثبَّتة على نظام المستخدم.
**الصياغة:** ```css @font-face { font-family: 'اسم الخط'; src: url('path/to/font.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } ```
**صيغ ملفات الخطوط:** - **woff2** — الأحدث والأصغر حجماً، ادعم على كل المتصفحات الحديثة. - **woff** — بديل للمتصفحات القديمة. - ttf / otf — للتطبيقات، ليست مثالية للويب.
**font-display:** يتحكم في سلوك التحميل: - `auto` — يترك القرار للمتصفح - `swap` — يعرض خط النظام ثم يستبدله (يمنع FOIT) - `block` — يخفي النص حتى يُحمَّل الخط (يسبب FOIT) - `fallback` — عرض الفولباك ثم تبديل سريع - `optional` — يُحمّل فقط إذا كان الاتصال سريعاً
**Google Fonts:** طريقة سريعة لاستيراد خطوط بدون رفع ملفات.
| 1 | /* استيراد من ملف محلي */ |
| 2 | @font-face { |
| 3 | font-family: 'Tajawal'; |
| 4 | src: url('/fonts/Tajawal-Regular.woff2') format('woff2'); |
| 5 | font-weight: 400; |
| 6 | font-display: swap; |
| 7 | } |
| 8 | |
| 9 | /* استيراد من Google Fonts */ |
| 10 | @import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap'); |
مثال 1: إعداد خط عربي محلي
| 1 | @font-face { |
| 2 | font-family: 'Cairo'; |
| 3 | src: url('/fonts/Cairo-Regular.woff2') format('woff2'), |
| 4 | url('/fonts/Cairo-Regular.woff') format('woff'); |
| 5 | font-weight: 400; |
| 6 | font-style: normal; |
| 7 | font-display: swap; |
| 8 | } |
| 9 | |
| 10 | @font-face { |
| 11 | font-family: 'Cairo'; |
| 12 | src: url('/fonts/Cairo-Bold.woff2') format('woff2'); |
| 13 | font-weight: 700; |
| 14 | font-style: normal; |
| 15 | font-display: swap; |
| 16 | } |
| 17 | |
| 18 | body { font-family: 'Cairo', sans-serif; } |