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

Rob Dodson

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

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

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

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

• لدى 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 يجب استخدام هذه القيمة فقط عند عرض النص بخط معين بالنسبة إلى الصفحة، إلا أن العرض بأي خط سيظل يعرض عبر كل رسالة. يُعتبر نص الشعار مناسبًا للتبديل نظرًا إلى أنّه يعرض اسم الشركة باستخدام اسم احتياطي معقول ستظهر الرسالة، ولكنك قد نستخدم الخط الرسمي في النهاية.

البديل

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

اختياري

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

دعم المتصفح

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

عرض توضيحي

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