الخطوط المستضافة ذاتيًا

الخطوط ذاتية الاستضافة هي ملفات خطوط يتم عرضها من خوادمك الخاصة - بدلاً من الخطوط التي يوفرها موفر خطوط خارجي (على سبيل المثال، Google Fonts).

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

يجمع المثال التالي بين أسلوبين من الأداء لتقديم خط تتم استضافته ذاتيًا في أسرع وقت ممكن: استخدام تعريفات الخطوط المضمّنة واستخدام تنسيق الخط WOFF2.

  • بيانات الخطوط المضمّنة: إنّ تضمين بيانَي @font-face وfont-family في المستند الرئيسي بدلاً من تضمين هذه المعلومات في ورقة أنماط خارجية، يسمح للمتصفّح بتحديد ملفات الخطوط التي سيتم استخدامها في الصفحة بدون الحاجة إلى انتظار تنزيل ملف ورقة أنماط منفصل. وهذا مهم لأنّ المتصفحات بشكل عام لن تنزّل ملفات الخطوط إلى أن تعرف أنّها مستخدمة على الصفحة. في معظم الحالات، يُفضَّل استخدام نماذج الخطوط المضمّنة استخدام preload لتحميل الخطوط.

  • WOFF2: من بين الخطوط الحديثة، يُعدّ WOFF2 الأحدث، ويحتوي على أوسع التوافق مع المتصفحات ويقدم أفضل ضغط. ونظرًا لأنه يستخدم Brotli، يضغط WOFF2 بنسبة 30% أفضل من WOFF.

لتحسين الأداء بشكل أكبر، يمكنك استخدام الإعداد الفرعي للخطوط. الإعداد الفرعي للخط هو ممارسة تقسيم ملف الخط إلى مجموعات فرعية أصغر - عادةً بهدف إزالة الأحرف الرسومية غير المستخدمة. يمكن أن يؤدي هذا إلى تقليل حجم ملف الخط بشكل كبير. تشمل أدوات إنشاء مجموعات فرعية للخطوط fontkit وsubfont وglyphhanger.

لمزيد من المعلومات حول أفضل الممارسات المتعلقة بالخطوط المستضافة ذاتيًا، راجع استخدام الخطوط المستضافة ذاتيًا.

مثال:

HTML

<head>
    <style>
        @font-face {
            font-family: 'Google Sans';
            src: url("Google Sans.woff2") format('woff2');
            font-display: swap;
        }
        body {
            font-family: system-ui;
            font-size: 1em;
        }
        h1 {
            font-family: 'Google Sans', sans-serif;
            font-size: 3em;
        }
    </style>
</head>