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

Ilya Grigorik

Jeremy Wagner

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

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

بنية خط الويب

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

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

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

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

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

• الحدث التالي
• إيقاف
• 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 المقدَّم.

ملاحظة: ما لم يتم الإشارة إلى أحد الخطوط التلقائية للنظام، من النادر أن يقوم المستخدم بتثبيته على الجهاز، خاصةً على الأجهزة الجوّالة، حيث يستحيل عمليًا "تثبيت" خطوط إضافية. حتى في حال بدأت بإدخال local()، يجب دائمًا تقديم قائمة بإدخال url() لأولئك الذين لم يتم تنزيل هذا الإدخال لهم.

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

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

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

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

الإعداد الفرعي لنطاق Unicode

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

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

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

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

@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 Fonts:

@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.