The #ChromeDevSummit site is live, happening Nov 12-13 in San Francisco, CA
Check it out for details and request an invite. We'll be diving deep into modern web tech & looking ahead to the platform's future.

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

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

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

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

TL;DR

  • يمكن أن تتضمن خطوط الترميز الموحد آلاف رموز الصور المنقوشة
  • 'يتوفر أربعة تنسيقات للخط: WOFF2 وWOFF وEOT وTTF'
  • تتطلب بعض تنسيقات الخط استخدام ضغط GZIP

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

جدول الصور المنقوشة في الخط

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

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

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

تتوفر الآن تنسيقات حاوية لأربعة خطوط للاستخدام على الويب: وهي كما يلي: EOT وTTF وWOFF وWOFF2. ولكن لسوء الحظ، تتنوع الاختيارات ولا يتوفر تنسيق عام واحد يعمل على جميع المتصفحات القديمة والحديثة: ذلك أن EOT يتوافق مع IE فقط، وTTF يتوافق جزئيًا مع IE، بينما يتمتع WOFF بإمكانية توافق واسعة ولكنه ليس متاحًا مع بعض المتصفحات القديمة، أما WOFF 2.0 فهو بصدد التوافق مع العديد من المتصفحات.

فما الذي نستنتجه من ذلك كله؟ ليس هناك تنسيق واحد يعمل على جميع المتصفحات، أي أننا نحتاج إلى تقديم عدة تنسيقات لتوفير انطباع متناسق:

  • اعرض متغير WOFF 2.0 على المتصفحات التي تتوافق معه
  • اعرض متغير WOFF على معظم المتصفحات
  • اعرض متغير TTF على متصفحات Android القديمة (أدنى من 4.4)
  • اعرض متغير EOT على متصفحات IE القديمة (أدنى من IE9)

خفض حجم الخط باستخدام الضغط

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

  • لا يتم ضغط تنسيقات EOT وTTF افتراضيًا: تأكد من أن الخوادم مهيأة لتطبيق ضغط GZIP عند عرض هذه التنسيقات.
  • يتضمن WOFF ضغطًا مضمَّنًا - فتأكد من أن أداة ضغط WOFF تستخدم إعدادات الضغط المثالية.
  • يستخدم WOFF2 المعالجة المسبقة المخصصة وخوارزميات الضغط لتوفير نسبة انخفاض في حجم الملف تصل إلى 30% تقريبًا مقارنة بالتنسيقات الأخرى - راجع هذا التقرير.

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

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

TL;DR

  • استخدم التلميح format() لتحديد عدة تنسيقات خط
  • 'قلل حجم خطوط الترميز الموحد الكبيرة لتحسين الأداء: استخدم تقليل الحجم لنطاق الترميز الموحد وقدم رجوعًا يدويًا عن تقليل الحجم في المتصفحات القديمة'
  • قلل عدد متغيرات الخط الأسلوبي لتحسين أداء عرض الصفحة والنص

تتيح لنا قاعدة @font-face في CSS تحديد موضع مورد خط معين، وميزات نمطه والتمثيل البرمجي للترميز الموحد الذي يجب استخدامه معها. ويمكن الاستفادة من الجمع بين إعلانات @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'), 
       url('/fonts/awesome.woff') format('woff'),
       url('/fonts/awesome.ttf') format('ttf'),
       url('/fonts/awesome.eot') format('eot');
}

@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'),
       url('/fonts/awesome-i.ttf') format('ttf'),
       url('/fonts/awesome-i.eot') format('eot');
}

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

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

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

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

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

تقليل الحجم لنطاق الترميز الموحد

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

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

  • التمثيل البرمجي المفرد (على سبيل المثال 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'), 
       url('/fonts/awesome-l.woff') format('woff'),
       url('/fonts/awesome-l.ttf') format('ttf'),
       url('/fonts/awesome-l.eot') format('eot');
  unicode-range: U+000-5FF; /* Latin glyphs */
}

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

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

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

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

  1. كيف يمكننا تحديد المجموعات الفرعية اللازمة؟
  2. إذا كان تقليل حجم نطاق الترميز الموحد يتوافق مع المتصفح، فسيتم تلقائيًا تحديد المجموعة الفرعية المناسبة. ولن تحتاج الصفحة إلا إلى توفير ملفات المجموعة الفرعية وتحديد نطاقات الترميز الموحد المناسبة في قواعد @font-face.
  3. إذا لم يكن نطاق الترميز الموحد متوافقًا، فستحتاج الصفحة إلى إخفاء جميع المجموعات الفرعية غير اللازمة - أي يجب على المطوِّر تحديد المجموعات الفرعية المطلوبة.
  4. كيف يمكننا إنشاء مجموعات فرعية من الخطوط؟
  5. يمكنك استخدام أداة pyftsubset مفتوحة المصدر لتقليل حجم الخطوط وتحسينها.
  6. تتيح بعض خدمات الخطوط تقليل الحجم يدويًا عبر معلمات طلب مخصصة يمكنك استخدامها لتحديد المجموعة الفرعية المطلوبة يدويًا لصفحتك - ويمكنك الاطلاع على المستندات الخاصة بموفر الخطوط.

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

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

أوزان الخطوط

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

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

خوارزمية تطابق خط CSS3

يسري منطق شبيه على متغيرات italic. يتحكم مصمم الخطوط في المتغيرات التي سينتجها، ونحن نتحكم في المتغيرات التي سنستخدمها على الصفحة - ونظرًا لأن كل متغير يكون بتنزيل منفصل، من المفيد الحفاظ على عدد صغير للمتغيرات. على سبيل المثال، يمكننا تحديد متغيرين عريضين لمجموعة 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'), 
       url('/fonts/awesome-l.woff') format('woff'),
       url('/fonts/awesome-l.ttf') format('ttf'),
       url('/fonts/awesome-l.eot') format('eot');
  unicode-range: U+000-5FF; /* Latin glyphs */
}

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

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

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

تركيبة الخط

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

نمط خط CSS3

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

تحسين التحميل والعرض

TL;DR

  • يتم تأخير طلبات الخط حتى يتم إنشاء شجرة العرض، وقد يؤدي هذا إلى تأخر في عرض النص
  • تتيح واجهة برمجة التطبيقات Font Loading لنا تطبيق تحميل خطوط مخصص وإستراتيجيات عرض تحل محل تحميل الخط الكسول والافتراضي
  • يتيح لنا تضمين الخطوط تغيير تحميل الخطوط الكسول والافتراضي في المتصفحات القديمة

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

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

خطوط الويب ومسار العرض الحرج

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

مسار العرض الحرج للخط

  1. يطلب المتصفح مستند HTML
  2. يبدأ المتصفح تحليل استجابة HTML وإنشاء DOM
  3. يكتشف المتصفح CSS وجافا سكريبت وموارد أخرى ويرسل الطلبات
  4. ينشئ المتصفح CSSOM بعد تلقي جميع محتوى CSS ويجمع بينه وبين شجرة DOM لإنشاء شجرة العرض
  5. يتم إرسال طلبات الخط بمجرد توضيح شجرة العرض لمتغيرات الخط اللازمة لعرض النص المحدد على الصفحة
  6. ينفذ المتصفح التنسيق ويرسم المحتوى على الصفحة
  7. إذا لم يكن الخط متوفرًا بعد، فقد لا يعرض المتصفح أية وحدات بكسل للنص
  8. بعد أن يتوفر الخط، يرسم المتصفح وحدات بكسل للنص

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

  • يعطل Safari عرض النص حتى يكتمل تنزيل الخط.
  • يعطل كل من Chrome وFirefox عرض الخط لمدة تصل إلى 3 ثوانٍ، وبعد ذلك يستخدم خط رجوع، وبعد اكتمال تنزيل الخط، يعيد عرض النص مرة أخرى باستخدام الخط الذي تم تنزيله.
  • يعرض IE في الحال خط الرجوع إذا لم يكن خط الطلب متاحًا بعد، ويعيد عرضه بمجرد اكتمال تنزيل الخط.

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

تحسين عرض الخط باستخدام واجهة برمجة تطبيقات Font Loading

توفر واجهة برمجة تطبيقات Font Loading واجهة إعداد نصوص برمجية لتحديد وجوه خطوط CSS ومعالجتها، وتتبع مدى تقدم التنزيل، واستبدال سلوك التحميل الكسول الافتراضي. على سبيل المثال، إذا كنا على يقين من أن أحد متغيرات خط ما سيكون مطلوبًا، فيمكننا تحديده ومطالبة المتصفح ببدء جلب في الحال لمورد الخط:

var font = new FontFace("Awesome Font", "url(/fonts/awesome.woff2)", {
  style: 'normal', unicodeRange: 'U+000-5FF', weight: '400'
});

font.load(); // don't wait for render tree, initiate immediate fetch!

font.ready().then(function() {
  // apply the font (which may rerender text and cause a page reflow)
  // once the font has finished downloading
  document.fonts.add(font);
  document.body.style.fontFamily = "Awesome Font, serif";

  // OR... by default content is hidden, and rendered once font is available
  var content = document.getElementById("content");
  content.style.visibility = "visible";

  // OR... apply own render strategy here... 
});

علاوة على ذلك، ونظرًا لأنه يمكننا التحقق من طريقة فحص حالة الخط (عبر check()) وتتبع مدى تقدم التنزيل، يمكننا أيضًا تحديد إستراتيجية مخصصة لعرض النص على صفحاتنا:

  • يمكننا تعطيل عرض كل النص حتى يصبح الخط متوفرًا.
  • يمكننا تطبيق مهلة زمنية مخصصة لكل خط.
  • يمكننا استخدام خط رجوع لإلغاء حظر العرض وإدراج نمط جديد يستخدم الخط المطلوب بعد توفر الخط.

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

تحسين عرض الخط باستخدام التضمين

هناك إستراتيجية بديلة وبسيطة يمكن استخدام واجهة برمجة التطبيقات Font Loading فيها للحد من مشكلة النص الفارغ وهي تضمين محتويات الخط في ورقة أنماط CSS:

  • ويتم تنزيل أوراق أنماط CSS التي تتضمن استعلامات وسائط متطابقة تلقائيًا باستخدام المتصفح مع الأولوية نظرًا لأنها تكون مطلوبة لإنشاء CSSOM.
  • يجبر تضمين بيانات الخط في ورقة أنماط CSS المتصفح على تنزيل الخط بأولوية عالية وبدون انتظار شجرة العرض - أي يعتبر ذلك بمثابة استبدال يدوي لسلوك التحميل الكسول الافتراضي.

ولا تعد إستراتيجية التضمين مرنة بالقدر الكافي ولا تسمح لنا بتحديد مهلات زمنية مخصصة أو إستراتيجيات عرض لمحتوى مختلف، ولكنها تعد حلاً بسيطًا ومفيدًا يمكن استخدامه على جميع المتصفحات. وللحصول على أفضل نتائج، يمكنك فصل الخطوط المضمنة إلى أوراق أنماط مستقلة بذاتها وعرضها بدون max-age طويل - وبهذه الطريقة،عند تحديث CSS، لن يتم إجبار الزائرين على إعادة تنزيل الخطوط.

تحسين إعادة استخدام الخط باستخدام ذاكرة التخزين المؤقت في HTTP

تعد موارد الخط عادة موارد ثابتة ولا تتعرض لتحديثات بصفة مستمرة. ونتيجة لذلك، فهي تناسب تمامًا انتهاء صلاحية max-age الطويل - فتأكد من تحديد كل من رأس ETag الشرطي وسياسة Cache-Control الاختيارية مع جميع موارد الخطوط.

وليست هناك حاجة إلى تخزين الخطوط في وحدة تخزين داخلية أو عبر آليات أخرى - لأن كلاً منها سيتسبب في مشكلة في الأداء. توفر ذاكرة تخزين HTTP المؤقت في المتصفح بالإضافة إلى واجهة برمجة تطبيقات Font Loading أو مكتبة webfontloader أفضل وأهم آلية لعرض موارد الخطوط على المتصفح.

قائمة التحقق من التحسين

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

إلا أن تطبيقها بدون خبرة قد يؤدي إلى تنزيلات كبيرة وحدوث تأخر بدون داعٍ. ولذلك يجب تطبيق مجموعة أدوات التحسين ومساعدة المتصفح من خلال تحسين أصول الخطوط نفسها وكيفية جلبها واستخدامها على الصفحات.

  1. راجع استخدام الخطوط وراقبه: لا تستخدم عددًا كبيرًا من الخطوط على الصفحات، ومع كل خط، قلل عدد المتغيرات المستخدمة قدر الإمكان. وهذا سيساعد في ترك انطباع بالثبات والسرعة لدى المستخدم.
  2. قلل حجم موارد الخط: يمكن تقليل حجم العديد من الخطوط أو تقسيمها إلى عدة نطاقات ترميز موحد لتقديم الصور المنقوشة المطلوبة فقط في صفحة ما - وهذا يقلل من حجم الملف ويحسن من سرعة تنزيل المورد. إلا أنه عند تحديد المجموعات الفرعية، يجب أن تتوخى الحذر من خلال التحسين لإعادة استخدام الخط - على سبيل المثال، عدم تنزيل مجموعة مختلفة ومتداخلة من الأحرف على كل صفحة. وهناك إجراء جيد وهو تقليل الحجم بناءً على النص البرمجي - على سبيل المثال اللاتيني والسيريلي وهكذا.
  3. وفر تنسيقات خطوط محسنة مع كل متصفح: يجب تقديم كل خط بتنسيق WOFF2 وWOFF وEOT وTTF. تأكد من تطبيق ضغط GZIP على التنسيقين EOT وTTF، نظرًا لأنه لا يتم ضغطهما افتراضيًا.
  4. حدد سياسات إعادة التحقق والتخزين المؤقت المثالي: تعد الخطوط موارد ثابتة لا يتم تحديثها بشكل متكرر. تأكد من أن الخوادم توفر طابعًا زمنيًا طويلاً لـ max-age، ورمز إعادة تحقق مميزًا، للسماح بإعادة استخدام فعالة بين الصفحات المختلفة.
  5. استخدم واجهة برمجة تطبيقات Font Loading: قد يؤدي سلوك التحميل الكسول الافتراضي إلى تأخر في عرض النص. تتيح واجهة برمجة تطبيقات Font Loading لنا استبدال هذا السلوك في خطوط معينة، وتحديد عرض مخصص وإستراتيجيات مهلة زمنية للمحتوى المختلف على الصفحة. بالنسبة إلى المتصفحات القديمة التي لا تتوافق مع واجهة برمجة التطبيقات، يمكنك استخدام مكتبة webfontloader في جافا سكريبت أو استخدام إستراتيجية تضمين CSS.