تقليل حجم الخط على الويب

Ilya Grigorik

Jeremy Wagner

يعد أسلوب الخط أمرًا أساسيًا للتصميم الجيد والعلامة التجارية وسهولة القراءة وإمكانية الوصول. تتيح خطوط الويب كل ما سبق والمزيد: النص قابل للتحديد والبحث والتكبير/التصغير المتوافق مع عدد النقاط لكل بوصة (DPI)، وهو ما يوفر عرض نص متناسق ودقيق بغض النظر عن حجم الشاشة ودقتها. وWebFonts بالغة الأهمية للتصميم وتجربة المستخدم والأداء.

يشكّل تحسين خطوط الويب جزءًا مهمًا من استراتيجية الأداء الشاملة. كل خط هو مورد إضافي، وقد تحظر بعض الخطوط عرض النص، ولكن لا يعني مجرد استخدام الصفحة لـ WebFonts أنه يجب عرضها بشكل أبطأ. على العكس من ذلك، يمكن أن تساعد الخطوط المحسَّنة، إلى جانب استراتيجية حكيمة لكيفية تحميلها وتطبيقها على الصفحة، في تقليل الحجم الإجمالي للصفحة وتحسين أوقات عرض الصفحة.

تقسيم الخط على الويب

خطوط الويب هي مجموعة من الرموز الرسومية، وكل حرف رسومي هو شكل متّجه يصف حرفًا أو رمزًا. نتيجة لذلك، يحدد متغيران بسيطان حجم ملف خط معين: مدى تعقيد مسارات المتجه لكل حرف رسومي وعدد الرموز الرسومية في خط معين. على سبيل المثال، يحتوي Open Sans، وهو أحد أشهر خطوط WebFonts، على 897 حرفًا رسوميًا، بما في ذلك الأحرف اللاتينية واليونانية والسيريلية.

عند اختيار خط، من المهم مراعاة مجموعات الأحرف المتوافقة. إذا كنت بحاجة إلى ترجمة محتوى صفحتك إلى لغات متعددة، فيجب استخدام خط يمكنه تقديم مظهر وتجربة متسقة للمستخدمين. على سبيل المثال، تهدف مجموعة خطوط Noto من Google إلى دعم جميع لغات العالم. ومع ذلك، لاحظ أن الحجم الإجمالي لتطبيق Noto، مع تضمين جميع اللغات، ينتج عنه تنزيل بتنسيق ZIP يزيد عن 1.1 غيغابايت.

ستكتشف في هذا المنشور كيفية تقليل حجم الملف الذي يتم إرساله لخطوط الويب الخاصة بك.

تنسيقات خطوط الويب

هناك حاليًا تنسيقان مقترحان لحاوية الخطوط قيد الاستخدام على الويب:

• منفذ EOT
• TTF
• WOFF
• WOFF2.

يتمتع WOFF وWOFF 2.0 بدعم كبير ويتوافقان مع جميع المتصفحات الحديثة.

• عرض نسخة WOFF 2.0 على المتصفحات الحديثة
• في حال الضرورة القصوى، مثلاً إذا كنت لا تزال بحاجة إلى استخدام Internet Explorer 11، يمكنك استخدام WOFF كإجراء احتياطي.
• وكحل بديل، يمكنك عدم استخدام خطوط الويب في المتصفحات القديمة والرجوع إلى خطوط النظام. وقد يكون هذا أكثر فعالية بالنسبة إلى الأجهزة القديمة والأكثر تقييدًا أيضًا.
• بما أنّ الإصدارَين WOFF وWOFF 2.0 يشملان كل القواعد الأساسية للمتصفّحات الحديثة والقديمة التي لا تزال قيد الاستخدام، لم يعُد استخدام EOT وTTF ضروريًا ويمكن أن يؤدي إلى زيادة مدة تنزيل خطوط الويب.

خطوط الويب والضغط

يحتوي كل من WOFF وWOFF 2.0 على ضغط مدمج. إنّ الضغط الداخلي في WOFF 2.0 يستخدم Brotli ويقدم ضغطًا أفضل بنسبة 30% من WOFF. لمزيد من المعلومات، يمكنك الاطّلاع على تقرير تقييم WOFF 2.0.

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

تحديد مجموعة خطوط باستخدام @font-face

تسمح لك قاعدة CSS @font-face بتحديد موقع مورد خط معيّن وخصائص نمطه ونقاط رموز Unicode التي يجب استخدام هذا الخط لها. ويمكن استخدام مجموعة من تعريفات @font-face لإنشاء "مجموعة خطوط" الذي سيستخدمه المتصفح لتقييم موارد الخطوط التي يجب تنزيلها وتطبيقها على الصفحة الحالية.

ضع في الاعتبار خط متغير

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

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

اختيار التنسيق الصحيح

يوفّر كل تعريف @font-face اسم مجموعة الخطوط، التي تعمل كمجموعة منطقية من التعريفات المتعدّدة، وسمات الخط مثل النمط والوزن والتوسيع، وواصف src الذي يحدّد قائمة أولويات للمواقع الجغرافية لمورد الخط.

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome.woff2') format('woff2'),
       /* Only serve WOFF if necessary. Otherwise,
          WOFF 2.0 is fine by itself. */
       url('/fonts/awesome.woff') format('woff');
}

@font-face {
  font-family: 'Awesome Font';
  font-style: italic;
  font-weight: 400;
  src: local('Awesome Font Italic'),
       url('/fonts/awesome-i.woff2') format('woff2'),
       url('/fonts/awesome-i.woff') format('woff');
}

أولاً، تجدر الإشارة إلى أنّ الأمثلة أعلاه تحدّد مجموعة خطوط رائعة واحدة بنمطَين (عادي ومائل)، ويشير كل منهما إلى مجموعة مختلفة من موارد الخطوط. بالتالي، يحتوي كل واصف src على قائمة بخيارات الموارد ذات الأولوية ومفصولة بفواصل:

• يسمح لك التوجيه local() بالرجوع إلى الخطوط المثبَّتة على الجهاز وتحميلها واستخدامها. إذا كان الخط مثبتًا لدى المستخدم من قبل على نظامه، يتجاوز هذا الإجراء الشبكة بالكامل ويكون هو الأسرع.
• يسمح لك التوجيه url() بتحميل خطوط خارجية، ويُسمح لك أن يحتوي على تلميح format() اختياري يشير إلى تنسيق الخط المُشار إليه في عنوان URL المقدَّم.

عندما يحدد المتصفح أن الخط مطلوب، يكرر قائمة الموارد المتوفرة بالترتيب المحدد ويحاول تحميل المورد المناسب. على سبيل المثال، باتباع المثال أعلاه:

1. ينفّذ المتصفّح تنسيق الصفحة ويحدّد صيغ الخطوط المطلوبة لعرض النص المحدَّد على الصفحة. ولا ينزّل المتصفح الخطوط التي ليست جزءًا من نموذج كائن CSS (CSSOM) للصفحة، لأنّها غير مطلوبة.
2. بالنسبة إلى كل خط مطلوب، يتحقق المتصفح مما إذا كان الخط متاحًا محليًا.
3. إذا لم يكن الخط متاحًا محليًا، يتكرر المتصفِّح على التعريفات الخارجية:
   • في حال ظهور تلميح بشأن التنسيق، يتحقّق المتصفّح من توافقه مع التلميح قبل بدء عملية التنزيل. وإذا لم يكن المتصفّح يتيح عرض التلميح، ينتقل المتصفِّح إلى الزر الذي يليه.
   • إذا لم يكن هناك تلميح للتنسيق، سينزِّل المتصفِّح المورد.

ويتيح لك الجمع بين الأوامر المحلية والخارجية مع تلميحات التنسيق المناسبة تحديد كل تنسيقات الخطوط المتوفرة والسماح للمتصفح بالتعامل مع بقية التنسيقات. ويحدِّد المتصفّح الموارد المطلوبة ويختار التنسيق الأمثل.

الضبط الفرعي لنطاق يونيكود

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

يتيح لك واصف unicode-range تحديد قائمة بقيم النطاق مفصولة بفواصل، ويمكن أن يكون كلّ منها بأحد الأشكال الثلاثة المختلفة:

• تمثيل واحد (على سبيل المثال، U+416)
• نطاق الفاصل (على سبيل المثال، U+400-4ff): يشير إلى نقاط رمز البداية والنهاية لنطاق.
• نطاق أحرف البدل (مثل U+4??): تشير الأحرف ? إلى أي رقم سداسي عشري.

على سبيل المثال، يمكنك تقسيم مجموعة Awesome Font التي تستخدمها إلى اللاتينية واليابانية. مجموعات فرعية، يتم تنزيل كل منها حسب الحاجة:

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-jp.woff2') format('woff2');
  /* Japanese glyphs */
  unicode-range: U+3000-9FFF, U+ff??;
}

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

تتوافق جميع المتصفحات تقريبًا مع unicode-range. للتوافق مع المتصفحات القديمة، قد تحتاج إلى الرجوع إلى "الضبط الفرعي اليدوي". في هذه الحالة، يجب الرجوع إلى توفير مورد خط واحد يحتوي على جميع المجموعات الفرعية الضرورية وإخفاء الباقي من المتصفح. على سبيل المثال، إذا كانت الصفحة تستخدم أحرفًا لاتينية فقط، يمكنك إزالة الرموز الرسومية الأخرى وتقديم هذه المجموعة الفرعية المعيّنة كمورد مستقل.

1. حدِّد المجموعات الفرعية المطلوبة:
   • إذا كان المتصفّح يتيح ميزة التقسيم الفرعي يونيكود، سيختار تلقائيًا المجموعة الفرعية الصحيحة. تحتاج الصفحة فقط إلى توفير ملفات المجموعات الفرعية وتحديد نطاقات يونيكود المناسبة في قواعد @font-face.
   • إذا كان المتصفّح لا يتيح ميزة التجميع الفرعي بترميز يونيكود، سيتعيّن على الصفحة إخفاء جميع المجموعات الفرعية غير الضرورية. أي أنّه على المطوّر تحديد المجموعات الفرعية المطلوبة.
2. إنشاء مجموعات فرعية للخطوط:
   • استخدِم أداة pyftsubset المفتوحة المصدر لإضافة مجموعات فرعية وتحسين خطوطك.
   • ستعمل بعض خوادم الخطوط، مثل Google Font، على إعداد مجموعة فرعية تلقائيًا بشكلٍ تلقائي.
   • تتيح بعض خدمات الخطوط إجراء مجموعات فرعية يدوية من خلال مَعلمات طلب البحث المخصّصة، والتي يمكنك استخدامها لتحديد المجموعة الفرعية المطلوبة لصفحتك يدويًا. راجع وثائق موفر الخطوط.

اختيار الخطوط وتركيبها

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

يوضح الرسم التخطيطي أعلاه مجموعة خطوط تقدم ثلاثة أحجام غامقة مختلفة:

• 400 (متوسط).
• 700 (غامق).
• 900 (غامق جدًا).

ويتم ربط جميع خيارات المنتج الأخرى البينية (المشار إليها باللون الرمادي) تلقائيًا بأقرب صيغة من خلال المتصفّح.

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

خوارزمية مطابقة الخطوط في CSS

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

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 400;
  src: local('Awesome Font'),
       url('/fonts/awesome-l.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

@font-face {
  font-family: 'Awesome Font';
  font-style: normal;
  font-weight: 700;
  src: local('Awesome Font'),
       url('/fonts/awesome-l-700.woff2') format('woff2');
  /* Latin glyphs */
  unicode-range: U+000-5FF;
}

يذكر المثال أعلاه مجموعة Awesome Font التي تتكون من موردين يغطيان نفس مجموعة الأحرف الرسومية اللاتينية (U+000-5FF) لكنهما يوفران "وزنين" مختلفين: عادي (400) وغامق (700). ماذا يحدث إذا حددت إحدى قواعد CSS قيمة مختلفة للخط، أو تم ضبط سمة font-style على italic؟

• إذا لم تتوفر مطابقة خط تامة، سيحل المتصفح محل أقرب تطابق.
• إذا لم يتم العثور على مطابقة أسلوبية (على سبيل المثال، لم يتم الإعلان عن أي صيغ مائلة في المثال أعلاه)، سينشئ المتصفح صيغة الخط الخاصة به.

يوضح المثال أعلاه الفرق بين نتائج الخط الفعلية مقابل نتائج الخط المركَّب في Open Sans. يتم إنشاء جميع خيارات المنتج المركّبة من خط واحد بحجم 400. وكما ترى، هناك فرق ملحوظ في النتائج. ولم يتم تحديد تفاصيل حول كيفية إنشاء الصيغتين بالخط الغامق والمائل. وبالتالي، تختلف النتائج من متصفح إلى آخر، وهي تعتمد بشكل كبير على الخط.

قائمة التحقّق الخاصة بتحسين حجم خط الويب

• دقق في استخدام الخطوط وتابِعه: لا تستخدِم عددًا كبيرًا من الخطوط على صفحاتك، وقلِّل عدد الصيغ المستخدَمة لكل خط. يساعد ذلك في تقديم تجربة أكثر اتساقًا وسرعة للمستخدمين.
• تجنُّب التنسيقات القديمة إن أمكن: تنسيقات EOT وTTF وWOFF أكبر من WOFF 2.0. EOT وTTF هما تنسيقان غير ضروريين تمامًا، حيث قد يكون WOFF مقبولاً إذا كنت بحاجة إلى استخدام Internet Explorer 11. إذا كنت تستهدف المتصفحات الحديثة فقط، سيكون استخدام WOFF 2.0 هو أبسط الخيارات وأكثرها أداءً.
• اضبط مجموعة فرعية لموارد الخطوط: يمكن أن تشكِّل العديد من الخطوط مجموعات فرعية أو تنقسم إلى نطاقات يونيكود متعددة لتوفير الأشكال الرسومية التي تتطلبها صفحة معينة فقط. وهذا يقلل من حجم الملف ويحسّن سرعة تنزيل المورد. ومع ذلك، عند تحديد المجموعات الفرعية، احرص على تحسين الخطوط لإعادة استخدامها. على سبيل المثال، لا تنزِّل مجموعة أحرف مختلفة ولكن متداخلة في كل صفحة. حاسمة من الممارسات الجيدة تحديد مجموعة فرعية استنادًا إلى النص: على سبيل المثال، اللاتينية والسيريلية.
• إعطاء الأولوية لـ local() في قائمة src: من خلال إدراج local('Font Name') أولاً في قائمة src، يضمن عدم إرسال طلبات HTTP للخطوط التي سبق تثبيتها.
• استخدِم Lighthouse لاختبار ضغط النص.

التأثير في سرعة عرض أكبر محتوى مرئي (LCP) ومتغيّرات التصميم التراكمية (CLS)

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

إذا كنت قلقًا من أنّه على الرغم من جهود التحسين التي بذلتها، قد يستغرق ظهور نص الصفحة وقتًا طويلاً جدًا بسبب مورد خطوط الويب الكبير، وتحتوي السمة font-display على عدد من الإعدادات التي يمكن أن تساعدك على تجنُّب النص غير المرئي أثناء تنزيل الخط. ومع ذلك، قد يؤدي استخدام القيمة swap إلى حدوث متغيّرات كبيرة في التصميم تؤثر في متغيّرات التصميم التراكمية (CLS) لموقعك الإلكتروني. ننصحك باستخدام القيم optional أو fallback إن أمكن.

إذا كانت خطوط الويب الخاصة بك ضرورية لعلامتك التجارية - وبالتالي تجربة المستخدم - ففكر في التحميل المسبق للخطوط الخاصة بك حتى يكون للمتصفح الأسبقية في طلبها. يمكن أن يؤدي هذا الإجراء إلى تقليل مدة التبديل إذا كنت تستخدم font-display: swap، أو من مدّة الحظر إذا كنت لا تستخدم font-display.