يمكن أن يكون تحديد سلوك خط الويب أثناء تحميله أسلوبًا مهمًا لضبط الأداء. واصف عرض الخطوط الجديد في "@font-face" يتيح للمطوّرين تحديد كيفية عرض (أو طريقة احتياطية) لخطوط الويب الخاصة بهم،
بناءً على الوقت الذي يستغرقه تحميل الخطوط.
الاختلافات في عرض الخطوط اليوم
تتيح خطوط الويب للمطورين القدرة على دمج أسلوب الخط الغني في مشاريعهم مع تحقيق مقايضة بأنه إذا لم يكن لدى المستخدم خطًا طباعي، فيجب أن يقضي المتصفح بعض الوقت في تنزيله. وبما أنّ الشبكات قد تكون غير مستقرة، قد يؤثر وقت التنزيل هذا بشكل سلبي في تجربة المستخدم. ففي النهاية، لن يهتم أحد بمدى جمال نصك إذا استغرق عرضه وقتًا طويلاً!
للحدّ من مخاطر بطء تنزيل الخط، تنفّذ معظم المتصفحات مهلة يتم بعدها استخدام خط احتياطي. هذا أسلوب مفيد ولكن للأسف تختلف المتصفحات عن التنفيذ الفعلي
| المتصفح | عملية استبعاد للقناة لمهلة معيّنة | Fallback | تبديل |
|---|---|---|---|
| الإصدار 35 من Chrome أو الإصدارات الأحدث | 3 ثوانٍ | نعم | نعم |
| Opera | 3 ثوانٍ | نعم | نعم |
| Firefox | 3 ثوانٍ | نعم | نعم |
| Internet Explorer | 0 ثانية | نعم | نعم |
| Safari | بدون مهلة | لا ينطبق | لا ينطبق |
- يتم تحديد مهلة مدتها ثلاث ثوان في Chrome وFirefox، وبعدها يتم عرض النص بخط احتياطي. وإذا تمكّن الخط من التنزيل، سيحدث في النهاية عملية تبديل وتتم إعادة عرض النص بالخط المقصود.
- يتضمن Internet Explorer مهلة صفر ثانية تؤدي إلى عرض النص فورًا. إذا لم يكن الخط المطلوب متاحًا بعد، يتم استخدام خط احتياطي وإعادة عرض النص لاحقًا عند توفّر الخط المطلوب.
- لا يتّبع Safari أي سلوك متعلق بالمهلة (أو على الأقل لا شيء يتجاوز مهلة الشبكة الأساسية).
وما هو أسوأ من ذلك، يملك المطوّرون سيطرة محدودة في تحديد مدى تأثير هذه القواعد في تطبيقاتهم. إنّ المطوّر المهتم بالأداء قد يفضِّل الحصول على تجربة مبدئية أسرع تستخدم خطًا احتياطيًا، ويستفيد فقط من خط الويب الأفضل في الزيارات اللاحقة بعد أن تتاح له الفرصة للتنزيل. باستخدام أدوات مثل Font Download API، قد يكون من الممكن تجاوز بعض سلوكيات المتصفّح التلقائية وتحقيق مكاسب الأداء، ولكن يتم ذلك مقابل الحاجة إلى كتابة كميات بسيطة من JavaScript والتي يجب تضمينها بعد ذلك في الصفحة أو طلبها من ملف خارجي، ما يتسبّب في زيادة وقت استجابة HTTP.
للمساعدة في معالجة هذا الموقف، اقترحت "مجموعة عمل خدمة مقارنة الأسعار" (CSS) أداةً
@font-face جديدةً، وهي font-display، وسمة مقابلة
للتحكّم في طريقة عرض أي خط قابل للتنزيل قبل أن يتم تحميله بالكامل.
المخططات الزمنية لتنزيل الخطوط
وعلى غرار سلوكيات مهلة الخط الحالية التي تطبّقها بعض المتصفّحات حاليًا،
تقسِّم السمة font-display فترة تنزيل الخط إلى ثلاث
فترات رئيسية.
- النقطة الأولى هي فترة حظر الخطوط. وخلال هذه الفترة، إذا لم يتم تحميل واجهة الخط، يجب أن يتم عرض أي عنصر يحاول استخدامه مع واجهة خط احتياطية غير مرئية. إذا تم تحميل واجهة الخط بنجاح خلال فترة الحظر، فسيتم استخدام واجهة الخط بشكل طبيعي.
- تحدث فترة تبديل الخط بعد فترة حظر الخطوط مباشرةً. وخلال هذه الفترة، إذا لم يتم تحميل واجهة الخط، يجب أن يتم عرض أي عنصر يحاول استخدامه بدلاً من ذلك بواجهة خط احتياطية. إذا تم تحميل واجهة الخط بنجاح أثناء فترة التبديل، فسيتم بعد ذلك استخدام واجهة الخط بشكل طبيعي.
- تحدث فترة فشل الخط مباشرةً بعد فترة تبديل الخط. إذا لم يتم تحميل واجهة الخط عند بدء هذه النقطة، يتم وضع علامة عليها كتعذّر تحميل، ما يتسبب في الإجراء الاحتياطي العادي للخط. وبخلاف ذلك، يتم استخدام واجهة الخط بشكل طبيعي.
يشير فهم هذه النقاط إلى أنّه يمكنك استخدام 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 فرصة. وبالنسبة للمطوّرين المهتمّين بالأداء، يمكن أن يكون
أداة إضافية مفيدة ضمن حزمة الأدوات.