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

Ilya Grigorik
Jeremy Wagner

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

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

بنية خط الويب

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

جدول رموز الخطوط

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

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

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

يتوفّر حاليًا تنسيقان مقترَحان لحاويات الخطوط مستخدَمان على الويب:

تتوفّر 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

تتيح لك قاعدة @font-face في CSS تحديد موقع مصدر خط معيّن وخصائص تصميمه ونقاط رمز 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');
}

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

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

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

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

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

التقسيم الفرعي لنطاق Unicode

بالإضافة إلى خصائص الخط، مثل النمط والوزن والتمديد، تتيح لك القاعدة @font-face تحديد مجموعة من نقاط الترميز Unicode التي يدعمها كل مصدر. يتيح لك ذلك تقسيم خط 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. حدِّد المجموعات الفرعية المطلوبة:
    • إذا كان المتصفّح يتيح تقسيم نطاق Unicode إلى مجموعات فرعية، سيختار المجموعة الفرعية المناسبة تلقائيًا. كل ما عليك فعله هو توفير ملفات المجموعة الفرعية وتحديد نطاقات Unicode المناسبة في قواعد @font-face.
    • إذا كان المتصفّح لا يتيح تقسيم نطاق Unicode إلى مجموعات فرعية، يجب أن تخفي الصفحة كل المجموعات الفرعية غير الضرورية، أي على المطوّر تحديد المجموعات الفرعية المطلوبة.
  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 فقط هو الخيار الأبسط والأكثر فعالية.
  • تقسيم موارد الخطوط إلى مجموعات فرعية: يمكن تقسيم العديد من الخطوط إلى مجموعات فرعية أو تقسيمها إلى نطاقات Unicode متعددة لعرض الرموز الرسومية التي تتطلّبها صفحة معيّنة فقط. يؤدي ذلك إلى تقليل حجم الملف وتحسين سرعة تنزيل المورد. ومع ذلك، عند تحديد المجموعات الفرعية، احرص على تحسين إمكانية إعادة استخدام الخط. على سبيل المثال، لا تنزّل مجموعة مختلفة ولكن متداخلة من الأحرف على كل صفحة. من الممارسات الجيدة تقسيم البيانات استنادًا إلى النص، مثل اللاتينية والسيريلية.
  • منح الأولوية لـ local() في قائمتك src: يضمن إدراج local('Font Name') أولاً في قائمتك src عدم إرسال طلبات HTTP للخطوط المثبَّتة.
  • استخدِم Lighthouse لاختبار ضغط النص.

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

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

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

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