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

Ilya Grigorik

Jeremy Wagner

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

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

شرح تفصيلي لخط الويب

خط الويب هو مجموعة من الحروف الرسومية، وكل حرف رسومي هو شكل متّجه يصف حرفًا أو رمزًا. نتيجةً لذلك، يحدّد متغيّران بسيطان حجم ملف خط معيّن: مدى تعقيد مسارات المتجهات لكل حرف رسومي وعدد الحروف الرسومية في خط معيّن. على سبيل المثال، يحتوي خط Open Sans، وهو أحد خطوط الويب الأكثر شيوعًا، على 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');
}

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

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

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

1. يُجري المتصفح تنسيق الصفحة ويحدّد صيغ الخطوط المطلوبة لعرض النص المحدّد على الصفحة. لا ينزّل المتصفح الخطوط التي لا تشكّل جزءًا من نموذج كائن CSS (CSSOM) للصفحة، لأنّها غير مطلوبة.
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.