طريقة جديدة لتقليل تأثير تحميل الخط: واصفات خطوط CSS

لطالما كان تحميل الخطوط مصدر قلق لأداء الويب ، ولا توجد بالفعل خيارات جيدة هنا. إذا كنت ترغب في استخدام خطوط الويب ، فإن اختياراتك هي أساسًا Flash of Invisible Text (المعروف أيضًا باسم FOIT) حيث يتم إخفاء النص حتى يتم تنزيل الخط أو Flash of Unstyled Text (FOUT) حيث تستخدم خط النظام الاحتياطي في البداية ثم ترقيته إلى خط الويب عند التنزيل. لم يفز أي من الخيارين حقًا لأن أيًا منهما ليس مرضيًا حقًا ، بصراحة.

ألم يفترض font-display لحل هذا؟

أعطت خاصية font-display الخط لـ @font-face هذا الخيار لمطور الويب بينما قرر المستعرض سابقًا أن (IE و Edge فضلوا FOUT في الماضي ، بينما فضلت المتصفحات الأخرى FOIT). ومع ذلك ، بعد ذلك لم تحل المشكلة حقًا.

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

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

الآن ، عند وضعها جنبًا إلى جنب ، تكون خطوط الويب أجمل بكثير وتتناسب مع العلامة التجارية Smashing Magazine. لكننا نرى أيضًا أن هناك بعض الاختلاف في تخطيط النص مع الخطين. الخطوط بأحجام مختلفة جدًا ، ولهذا السبب ، يتغير محتوى الشاشة. في عصر أساسيات الويب الأساسية والتحولات التراكمية في التخطيط (بشكل صحيح تمامًا!) يتم التعرف على أنها ضارة للمستخدمين ، font-display: swap هو خيار ضعيف بسبب ذلك.

لقد عدت مرة أخرى إلى font-display: block على المواقع التي أعتني بها لأنني أجد بالفعل تحول النص مزعجًا ومزعجًا. في حين أنه من الصحيح أن block لن تتوقف عن التحولات (لا يزال الخط يتم تقديمه في نص غير مرئي) ، إلا أنه على الأقل يجعلها أقل وضوحًا للمستخدم. لقد قمت أيضًا بالتحسين عن طريق تحميل الخطوط عن طريق التحميل المسبق للخطوط التي جعلتها صغيرة قدر الإمكان من خلال الاستضافة الذاتية للخطوط الفرعية - لذلك غالبًا ما يرى الزوار الخطوط الاحتياطية لفترة زمنية قصيرة فقط. بالنسبة لي ، كانت "فترة الحظر" swap قصيرة جدًا وأنا بصراحة أفضل الانتظار لفترة أطول قليلاً لتصحيح العرض الأولي.

استخدام font-display: optional يمكنه حل FOIT و FOUT - بتكلفة

الخيار الآخر هو استخدام font-display: optional . هذا الخيار يجعل خطوط الويب اختيارية بشكل أساسي ، أو لوضعها بشكل مختلف ، إذا لم يكن الخط موجودًا في الوقت الذي تحتاجه الصفحة ، فالأمر متروك للمتصفح لعدم تبديله مطلقًا. باستخدام هذا الخيار ، نتجنب كلاً من FOIT و FOUT من خلال استخدام الخطوط التي تم تنزيلها بالفعل فقط.

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

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

لذلك ، فإن جميع خيارات الخطوط لها عيوبها ، بما في ذلك خيار عدم استخدام خطوط الويب على الإطلاق ، أو استخدام خطوط النظام (وهو أمر مقيد - ولكن ربما لا يكون مقيدًا كما يعتقد الكثير!).

جعل الخط الاحتياطي أكثر توافقًا مع الخط الخاص بك

كان الكأس المقدسة لتحميل خط الويب هو جعل الخط الاحتياطي أقرب إلى خط الويب الفعلي لتقليل التحول الملحوظ قدر الإمكان ، بحيث يكون استخدام swap أقل تأثيرًا. بينما لن نتمكن أبدًا من تجنب التحولات تمامًا ، يمكننا أن نفعل ما هو أفضل مما في لقطة الشاشة أعلاه. غالبًا ما يتم الاستشهاد بتطبيق Font Style Matcher من Monica Dinculescu في مقالات تحميل الخطوط ويعطي لمحة رائعة عما يجب أن يكون ممكنًا هنا. يسمح لك بشكل مفيد بتراكب نفس النص في خطين مختلفين لمعرفة مدى اختلافهما ، وضبط إعدادات الخط لجعلها أكثر توافقًا:

لسوء الحظ ، تكمن المشكلة في مطابقة نمط الخط في أنه لا يمكننا تطبيق أنماط CSS هذه فقط على الخطوط الاحتياطية ، لذلك نحتاج إلى استخدام JavaScript وواجهة برمجة تطبيقات FontFace.load لتطبيق (أو التراجع عن) اختلافات الأنماط هذه عند الويب تحميل الخط .

كمية الكود ليست ضخمة ، لكنها لا تزال تبدو وكأنها مجهود أكثر قليلاً مما ينبغي. على الرغم من وجود مزايا وإمكانيات أخرى لاستخدام JavaScript API لهذا كما أوضحه Zach Leatherman في هذا الحديث الرائع منذ عام 2019 - يمكنك تقليل التدفقات المعاد تدفقها والتعامل مع وضع data-server prefers-reduced-motion بالرغم من ذلك (لاحظ مع ذلك منذ ذلك الحين تعرض كلاهما لـ CSS منذ ذلك الحديث).

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

 font-family: Mija,-apple-system,Arial,BlinkMacSystemFont,roboto slab,droid serif,segoe ui,Ubuntu,Cantarell,Georgia,serif;

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

حل أفضل قادم

إذن ، هذا هو ملخص موجز لما وصلت إليه الأمور اعتبارًا من اليوم. ومع ذلك ، بدأ بعض الدخان في الظهور في الأفق.

متحمس لواصف "ضبط الحجم" في CSS للخطوط: قلل تحولات التخطيط عن طريق مطابقة خط احتياطي وخط ويب أساسي من خلال عامل مقياس للحروف الرسومية (النسبة المئوية).

راجع https://t.co/mdRW2BMg6A بواسطةcramforce للحصول على عرض توضيحي (Chrome Canary / FF Nightly with flags) pic.twitter.com/hEg1HfUJlT

- آدي عثماني (addyosmani) 22 مايو 2021

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

هذا هو بالضبط ما تفعله مجموعة جديدة من واصفات الخطوط كجزء من CSS Fonts Module Level 5. يتم تطبيق هذه على @font-face الإعلانات حيث يتم تعريف الخط الفردي.

كتب Simon Hearne عن هذا التحديث المقترح لمواصفات واصفات الخطوط التي تتضمن أربعة واصفات جديدة: ascent-override descent-override line-gap-override advance-override (تم إسقاطه منذ ذلك الحين). يمكنك اللعب بملعب F-mods الذي أنشأه Simon لتحميل الخطوط المخصصة والاحتياطية ، ثم العب مع التجاوزات للحصول على تطابق مثالي.

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

لكن يبدو أن الأمور تتغير مرة أخرى. في الآونة الأخيرة ، تم إسقاط advance-override لصالح واصف size-adjust القادم والذي يسمح لنا بتقليل تحولات التخطيط عن طريق مطابقة الخط الاحتياطي وخط الويب الأساسي من خلال عامل مقياس للصور الرسومية (النسبة المئوية).

كيف يعمل؟ لنفترض أن لديك CSS التالية:

 @font-face { font-family: 'Lato'; src: url('/static/fonts/Lato.woff2') format('woff2'); font-weight: 400; } h1 { font-family: Lato, Arial, sans-serif; }

ثم ما ستفعله هو إنشاء @font-face Arial الاحتياطي وتطبيق واصفات الضبط عليه. ستحصل بعد ذلك على مقتطف CSS التالي:

 @font-face { font-family: 'Lato'; src: url('/static/fonts/Lato.woff2') format('woff2'); font-weight: 400; } @font-face { font-family: "Lato-fallback"; size-adjust: 97.38%; ascent-override: 99%; src: local("Arial"); } h1 { font-family: Lato, Lato-fallback, sans-serif; }

هذا يعني أنه عند استخدام Lato-fallback مبدئيًا (نظرًا لأن Arial هو خط local ويمكن استخدامه على الفور دون أي تنزيل إضافي) ، فإن إعدادات size-adjust ascent-override تسمح لك بالاقتراب من خط Lato. إنه إعلان @font-face إضافي للكتابة ، ولكنه بالتأكيد أسهل كثيرًا من الأطواق التي كان علينا القفز عليها من قبل!

بشكل عام ، هناك أربعة واصفات رئيسية @font-face مضمنة في هذه المواصفات: size-adjust ، ascent-override descent-override ، وتجاوز line-gap-override مع وجود عدد قليل آخر قيد النظر لحالات الاستخدام المنخفضة ، والمرتفعة ، وحالات الاستخدام الأخرى .

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

الآن قد تحتوي أنظمة التشغيل المختلفة على إعدادات خطوط مختلفة قليلاً ، ويعد الحصول على هذه الإعدادات بشكل صحيح تمامًا مهمة مستحيلة ، لكن هذا ليس الهدف. الهدف هو سد الفجوة ، لذا فإن استخدام font-display: swap تجربة متنافرة ، لكننا لسنا بحاجة إلى الذهاب إلى أقصى الحدود optional أو عدم وجود خطوط ويب.

متى يمكننا البدء في استخدام هذا؟

تم بالفعل شحن ثلاثة من هذه الإعدادات في Chrome منذ الإصدار 87 ، على الرغم من أن واصف size-adjust المفتاح غير متاح بعد في أي متصفح مستقر. ومع ذلك ، فإن Chrome Canary يمتلكها ، كما يفعل Firefox خلف علم ، لذا فإن هذا ليس مفهومًا مجرّدًا بعيدًا ، ولكنه شيء يمكن أن يهبط قريبًا.

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

صرح Chrome عن نيته في إتاحة size-adjust في Chrome 92 المقرر إصداره في 20 يوليو ، مما يشير إلى أنه قد اقترب تقريبًا.

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