التحكم في أداء الخطوط من خلال عرض الخط

Rob Dodson

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

الاختلافات في عرض الخطوط اليوم

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

للتخفيف من مخاطر بطء تنزيل الخط، تنفِّذ معظم المتصفحات مهلة يتم بعدها استخدام خط احتياطي. هذه أسلوب مفيد، ولكن للأسف تختلف المتصفحات في التنفيذ الفعلي.

• لدى Chrome وFirefox مهلة ثلاث ثوانٍ يتم بعدها عرض النص بالخط الاحتياطي. إذا تمكن الخط من التنزيل، فحدث التبديل في النهاية وتتم إعادة عرض النص بالخط المقصود.
• تتضمن مهلة صفر ثانية لمتصفّح Internet Explorer، ما يؤدي إلى عرض النص فورًا. إذا لم يكن الخط المطلوب متاحًا، يتم استخدام خط احتياطي وإعادة عرض النص لاحقًا بعد توفُّر الخط المطلوب.
• لا يتضمن Safari سلوكًا للمهلة (أو على الأقل لا شيء خارج مهلة الشبكة الأساسية).

وما يزيد الأمر سوءًا، يمتلك المطورون تحكمًا محدودًا في تحديد كيفية تأثير هذه القواعد في تطبيقهم. قد يفضّل المطوّر المهتم بالأداء أن يحصل على تجربة أولية أسرع تستخدم خطًا احتياطيًا، ولا يستفيد إلا من خط الويب الأكثر أناقة في الزيارات اللاحقة بعد أن تُتاح له فرصة التنزيل. وباستخدام أدوات مثل Font Upload API، قد يكون بإمكانك تجاهل بعض سلوكيات المتصفّح التلقائية وتحقيق نتائج أفضل في الأداء، إلا أنّ الحاجة إلى كتابة كميات غير بسيطة من JavaScript يجب تضمينها في الصفحة أو طلبها من ملف خارجي، ما يتسبّب في حدوث وقت استجابة HTTP إضافي.

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

المخططات الزمنية لتنزيل الخطوط

على غرار السلوكيات الحالية لمهلة الخطوط التي تنفّذها بعض المتصفّحات في الوقت الحالي، يقسّم font-display فترة تنزيل الخط إلى ثلاث فترات رئيسية.

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

ويعني فهم هذه النقاط أنّه يمكنك استخدام font-display لتحديد كيفية عرض الخط اعتمادًا على ما إذا تم تنزيله أو وقت تنزيله.

ما هي طريقة عرض الخطوط المناسبة لك؟

لاستخدام واصف font-display، أضِفه في قواعد @font-face:

@font-face {
    font-family: 'Arvo';
    font-display: auto;
    src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

تتيح font-display حاليًا النطاق التالي من القيم auto | block | swap | fallback | optional.

تلقائي

تستخدم auto أي استراتيجية عرض خط يستخدمها وكيل المستخدم. تمتلك معظم المتصفحات حاليًا استراتيجية افتراضية تشبه الحظر.

صدّ

تمنح السمة block واجهة الخط فترة قصيرة (ننصح باستخدام 3 ثوانٍ في معظم الحالات) وفترة تبديل لانهائية. بمعنى آخر، يرسم المتصفح نصًا "غير مرئي" في البداية إذا لم يتم تحميل الخط، ولكنه يستبدل واجهة الخط بمجرد تحميله. للقيام بذلك، ينشئ المتصفح واجهة خط مجهولة المصدر بمقاييس مشابهة للخط المحدد ولكن مع جميع الرموز الرسومية التي لا تحتوي على "حبر". يجب استخدام هذه القيمة فقط إذا كان عرض النص بخط طباعي معينًا حتى تكون الصفحة قابلة للاستخدام.

تبديل اللغة

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

البديل

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

إجراء اختياري

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

المتصفحات المتوافقة

يتم حاليًا توفير العلامة font-display وراء علامة "ميزات النظام الأساسي التجريبية التجريبية" في Chrome 49 لأجهزة الكمبيوتر المكتبي، ويتم الشحن في Opera وOpera لنظام التشغيل Android.

عرض توضيحي

اطّلِع على العينة لإعطاء "font-display" لقطة. بالنسبة للمطورين الذين يفكرون في الأداء، يمكن أن تكون أداة أكثر فائدة في شريط الأدوات!