مقدمة عن الخطوط المتغيرة على الويب

مواصفات خط جديدة يمكن أن تقلّل بشكل كبير من أحجام ملفات الخطوط

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

في هذه المقالة، سنلقي نظرة على ماهية الخطوط المتغيرة، والفوائد التي تقدمها، وكيف يمكننا استخدامها في عملنا. أولاً، لنراجع كيفية عمل الطباعة على الويب، والابتكارات التي توفّرها الخطوط المتغيّرة.

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

اعتبارًا من أيار (مايو) 2020، أصبحت الخطوط المتغيّرة متاحة في معظم المتصفحات. اطّلِع على هل يمكنني استخدام الخطوط المتغيّرة؟ والخطوط الاحتياطية.

مقدمة

غالبًا ما يستخدم المطوّرون المصطلحين "خط" و"خطّ مكتوب" بالتبادل. ومع ذلك، هناك فرق: نوع الخط هو التصميم المرئي الأساسي الذي يمكن أن يظهر في العديد من تقنيات الطباعة المختلفة، والخط هو أحد هذه التطبيقات بتنسيق ملف رقمي. بعبارة أخرى، نوع الخط هو ما ترى، والخط هو ما تستخدمه.

المفهوم الآخر الذي غالبًا ما يتم تجاهله هو التمييز بين الأسلوب والعائلة. النمط هو خطّ طباعي واحد ومحدد، مثل "غامق مائل"، وتشكل المجموعة مجموعة كاملة من الأنماط.

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

التحديات التي تواجه المصمم والمطور

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

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

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

تقسيم الخط المتغيّر

تعالج الخطوط المتغيّرة هذه التحديات من خلال تجميع الأنماط في ملف واحد.

يتم ذلك من خلال البدء بنمط مركزي أو "تلقائي"، وعادةً ما يكون "عادي"، وهو تصميم روماني رأسي بكثافة وعرض هما الأكثر شيوعًا والالأكثر ملاءمةً للنص العادي. يتم بعد ذلك ربط هذا بأنماط أخرى في نطاق مستمر يسمى "المحور". المحور الأكثر شيوعًا هو weight (الوزن)، والذي يمكنه ربط النمط الافتراضي بنمط غامق. يمكن تحديد أيّ أسلوب فردي على طول محور، ويُسمّى "نسخة" من الخط المتغيّر . يُطلق مطوّر الخط أسماء على بعض النُسخ، على سبيل المثال، يُطلق اسم SemiBold على محور "الوزن" الموقع 600.

يحتوي الخط المتغير Roboto Flex على ثلاثة أنماط لمحور الوزن. يظهر النمط العادي في الوسط، وهناك نمطان في طرفَي المحور، أحدهما أخف وزنًا والآخر أثقل. يمكنك الاختيار من بين 900 مثيل:

يمكن لمطور الخط تقديم مجموعة من المحاور المختلفة. ويمكنك دمجها لأنّها تتشارك جميعها الأنماط التلقائية نفسها. لدى Roboto ثلاثة أنماط في محور العرض: النمط العادي في مركز المحور، ونمطان، أضيق وأعرض، في كل نهاية. تقدّم هذه السمات جميع سمات العرض للأسلوب العادي، وتتداخل مع محور "الوزن" لتوفير جميع سمات العرض لكل وزن.

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

مائل

من المثير للاهتمام معرفة الطريقة التي يتم بها التعامل مع النص المائل في الخطوط المتغيرة، لأنّ هناك طريقتَين مختلفتَين. تحتوي الخطوط الطباعية، مثل Helvetica أو Roboto، على خطوط خارجية متوافقة مع التداخل، لذا يمكن التداخل بين الأنماط الرومانية والمائلة، ويمكن استخدام محور الميل للانتقال من النمط الروماني إلى النمط المائل.

تحتوي الخطوط المخصّصة للنص (مثل Garamond أو Baskerville أو Bodoni) على خطوط خارجية للرمو⌂ب الشكل الروماني والمائل غير متوافقة مع الاستقراء. على سبيل المثال، لا تتطابق المخططات التي تحدِّد عادةً الحرف "n" بخط روماني صغير مع المخططات المستخدَمة لتحديد الحرف "n" بخط مائل صغير. بدلاً من إقحام خط محيط بالآخر، يتم تبديل المحور المائل من الخط الروماني إلى الخط المائل.

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

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

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

تعريفات المحاور

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

على الرغم من أنّ المحاور يمكنها التحكّم في الميزة نفسها، إلا أنّها قد تستخدم قيمًا مختلفة. على سبيل المثال، في الخطَين المتغيّرَين Oswald وHepta Slab، يتوفّر محور واحد فقط، وهو "الوزن"، ولكن النطاقات مختلفة. يمتلك Oswald النطاق نفسه الذي كان عليه قبل ترقيته ليصبح متغيّرًا، أي من 200 إلى 700، ولكن Hepta Slab يمتلك وزنًا خفيفًا للغاية عند 1 يصل إلى 900.

تحتوي المحاور الخمسة المسجّلة على علامات من 4 أحرف صغيرة تُستخدَم لتحديد قيمها في CSS:

بما أنّ مطوّر الخطّ يحدّد المحاور المتاحة في الخطّ المتغيّر، والقيم التي يمكن أن تتضمّنها، من الضروري معرفة ما يقدّمه كل خط. من المفترض أن توفّر مستندات الخط هذه المعلومات، أو يمكنك فحص الخط باستخدام أداة مثل Wakamai Fondue.

حالات الاستخدام والمزايا

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

تعبير مثير

يظهر أعلاه مثال رائع على التعبير الفني، وهو استكشاف لخط Decovar الذي أنشأته ماندي مايكل.

يمكنك الاطّلاع على المثال العملي ورمز المصدر للنموذج أعلاه هنا.

Animation

كما يمكن استكشاف أحرف متحركة بخطوط متغيرة. يوجد أعلاه مثال على محاور مختلفة يتم استخدامها مع الخط الطباعي Zycon. اطّلِع على مثال الحركة المباشرة على Axis Praxis.

Anicons هو أول خط أحرف متحركة للرموز الملونة في العالم، استنادًا إلى رموز Material Design. رمز Anicon هو تجربة تدمج بين تكنولوجيات خطّين رائدين: الخطوط المتغيّرة والخطوط الملوّنة.

Finesse

يقدم كل من Roboto Flex وAmstelvar مجموعة "المحاور المعيارية". في هذه المحاور، يتم تحليل الأحرف إلى 4 جوانب أساسية للشكل: الأشكال السوداء أو الموجبة، والأشكال البيضاء أو السلبية، وقياسَي x وy. بنفس الطريقة التي يمكن بها مزج الألوان الأساسية مع أي لون آخر لضبطها، يمكن استخدام هذه الجوانب الأربعة لضبط أي محور آخر.

يسمح لك محور XTRA في أمستلفار بضبط قيمة "أبيض" لكل ميل، كما هو موضح أعلاه. باستخدام أجزاء صغيرة من XTRA في اتجاه متعاكس، يتم تساوي عرض الكلمات.

الخطوط المتغيّرة في CSS

تحميل ملفات الخطوط المتغيّرة

يتم تحميل الخطوط المتغيّرة من خلال آلية @font-face نفسها المستخدَمة في خطوط الويب التقليدية الثابتة، ولكن مع تحسينَين جديدَين:

@font-face {
    font-family: 'Roboto Flex';
    src: url('RobotoFlex-VF.woff2') format('woff2-variations');
    src: url('RobotoFlex-VF.woff2') format('woff2') tech('variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
}

1. تنسيقات المصدر: لا نريد أن ينزِّل المتصفّح الخط إذا كان لا يتيح استخدام الخطوط المتغيّرة، لذلك نضيف وصفَي format وtech: مرة واحدة في البنية المزمع استخدامها في المستقبل (format('woff2') tech('variations'))، ومرة واحدة في بنية الخط المُعتمَد حاليًا ولكن سيتم إيقافها نهائيًا في المستقبل (format('woff2-variations')). إذا كان المتصفّح يتيح استخدام الخطوط المتغيّرة ويتوافق مع البنية المزمع استخدامها في المستقبل، سيستخدم البيان الأول. إذا كان يدعم الخطوط المتغيرة وبناء الجملة الحالي، فسيستخدم التعريف الثاني. وكلاهما يشير إلى نفس ملف الخط.

2- نطاقات الأنماط: ستلاحظ أنّنا نقدّم قيمتَين لكل من font-weight وfont-stretch. بدلاً من إعلام المتصفّح بالوزن المحدّد الذي يوفّره هذا الخط (على سبيل المثال font-weight: 500;)، نمنحه الآن نطاق القيم الذي يتيحه الخط. بالنسبة إلى Roboto Flex، يتراوح محور الوزن من 100 إلى 1000، وتربط خدمة CSS نطاق المحور مباشرةً بخاصية النمط font-weight. من خلال تحديد النطاق في @font-face، سيتم "تحديد" أي قيمة خارج هذا النطاق إلى أقرب قيمة صالحة. يتمّ ربط نطاق محور "العرض" بالطريقة نفسها بالسمة font-stretch.

إذا كنت تستخدم Google Fonts API، سيتم الاعتناء بكل هذه الإجراءات. لن تحتوي لغة CSS على التنسيقات والنطاقات المناسبة للمصدر فحسب، بل سترسل "خطوط Google" أيضًا خطوطًا احتياطية ثابتة في حال عدم توفّر الخطوط المتغيّرة.

استخدام الأوزان والمساحات

في الوقت الحالي، المحاور التي يمكنك ضبطها بشكل موثوق من CSS هي محور wght حتى font-weight، ومحور wdth حتى font-stretch.

في العادة، يمكنك ضبط font-weight ككلمة رئيسية (light أو bold) أو كقيمة عددية بين 100 و900، في الخطوات من 100. باستخدام الخطوط المتغيّرة، يمكنك ضبط أي قيمة ضمن نطاق "العرض" للخط:

.kinda-light {
  font-weight: 125;
}

.super-heavy {
  font-weight: 1000;
}

وبالمثل، يمكننا إعداد font-stretch باستخدام الكلمات الرئيسية (condensed، ultra-expanded) أو بالقيم المئوية:

.kinda-narrow {
  font-stretch: 33.3%;
}

.super-wide {
  font-stretch: 151%;
}

استخدام النص المائل والنص المائل المتّجه لليسار

يُستخدَم محور ital للخطوط التي تحتوي على نمط عادي ونمط مائل. يُعدّ المحور مفتاحًا للتفعيل/الإيقاف: القيمة 0 غير مفعّلة وستظهر بالتنسيق العادي، والقيمة 1 ستظهر بخط مائل. وعلى عكس المحاور الأخرى، لا يتوفّر انتقال. لن تؤدي القيمة 0.5 إلى ظهور النص "بخط مائل جزئي".

يختلف المحور slnt عن الخط المائل في أنه ليس نمطًا جديدًا، ولكنه يجعل النمط العادي يميل فقط. تكون القيمة التلقائية هي 0، ما يعني أشكال الأحرف الرأسية التلقائية. يبلغ الحد الأقصى للميل في Roboto Flex -10 درجات، ما يعني أنّ الأحرف ستميل إلى اليمين عند الانتقال من 0 إلى -10.

من السهل ضبط هذه المحاور من خلال سمة font-style، ولكن اعتبارًا من نيسان (أبريل) 2020، لا تزال تتم مرحلة وضع استراتيجية لتنفيذ ذلك. لذلك، عليك في الوقت الحالي التعامل مع هذه العناصر على أنّها محاور مخصّصة، وضبطها من خلال font-variation-settings:

i, em, .italic {
    /* Should be font-style: italic; */
    font-variation-settings: 'ital' 1;
}

.slanted {
    /* Should be font-style: oblique 10deg; */
    font-variation-settings: 'slnt' 10;
}

استخدام الأحجام البصرية

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

تمّت إضافة سمة CSS جديدة لهذا المحور: font-optical-sizing. يتم تلقائيًا ضبطه على auto، ما يجعل المتصفّح يضبط قيمة المحور استنادًا إلى font-size. وهذا يعني أنّ المتصفّح سيختار تلقائيًا أفضل حجم بصري، ولكن إذا أردت إيقاف هذه الميزة، يمكنك ضبط font-optical-sizing على none.

يمكنك أيضًا ضبط قيمة مخصّصة لمحور opsz، إذا كنت تريد عمدًا استخدام حجم بصري لا يتطابق مع حجم الخط. سيؤدي ملف CSS التالي إلى عرض النص بحجم كبير، ولكن بحجم بصري كما لو كان مطبوعًا بحجم 8pt:

.small-yet-large {
  font-size: 100px;
  font-variation-settings: 'opsz' 8;
}

استخدام محاور مخصّصة

على عكس المحاور المسجّلة، لن يتمّ ربط المحاور المخصّصة بخاصيّة CSS حالية، لذا عليك دائمًا ضبطها من خلال font-variation-settings. تكون علامات المحاور المخصّصة دائمًا بأحرف كبيرة، لتمييزها عن المحاور المسجّلة.

يوفّر Roboto Flex بعض المحاور المخصّصة، وأهمها Grade (GRAD). إنّ محور Grade مثير للاهتمام لأنّه يغيّر وزن الخط بدون تغيير العرض، وبالتالي لا تتغيّر فواصل الأسطر. من خلال اللعب بمحور "الصفّ"، يمكنك تجنُّب الاضطرار إلى إجراء تغييرات على محور "الوزن" تؤثر في العرض العام، ثم إجراء تغييرات على محور "العرض" تؤثر في الوزن العام.

بما أنّ GRAD هو محور مخصّص، يتراوح بين -200 و150 في Roboto Flex. يجب معالجة هذه المشكلة مع font-variation-settings:

.grade-light {
    font-variation-settings: `GRAD` -200;
}

.grade-normal {
    font-variation-settings: `GRAD` 0;
}

.grade-heavy {
    font-variation-settings: `GRAD` 150;
}

الخطوط المتغيّرة في Google Fonts

وسّعت خدمة "Google Fonts" كتالوجها من خلال الخطّ المتغيّر ، وتضيف خطوطًا جديدة بانتظام. تهدف الواجهة حاليًا إلى اختيار نُسخ فردية من الخط: اختَر الصيغة التي تريدها، وانقر على "اختيار هذا النمط"، وسيكون مُضافًا إلى عنصر <link> الذي يُجلب خدمة مقارنة الأسعار (CSS) والخطوط من Google Fonts.

لاستخدام جميع المحاور أو نطاقات القيم المتاحة، عليك تعرِض نظرة عامة على الخطوط المتغيّرة جميع المحاور والقيم.

يمكن أن تمنحك أداة روابط خطوط المتغيّرات من Google أيضًا أحدث عناوين URL للخطوط المتغيّرة الكاملة.

اكتساب إعدادات تنوع الخط

على الرغم من أنّ جميع المحاور المسجّلة ستصبح متاحة قريبًا من خلال خصائص CSS الحالية، قد تحتاج في الوقت الحالي إلى الاعتماد على font-variation-settings كخيار احتياطي. وإذا كان الخط يحتوي على محاور مخصّصة، ستحتاج إلى font-variation-settings أيضًا.

مع ذلك، هناك مشكلة صغيرة في font-variation-settings. سيتم تلقائيًا إعادة ضبط كلّ سمة لا يتم ضبطها صراحةً على الإعداد التلقائي. لا يتم اكتساب القيم التي تم ضبطها سابقًا. وهذا يعني أنّ ما يلي لن يعمل على النحو المتوقّع:

<span class="slanted grade-light">
    I should be slanted and have a light grade
</span>

أولاً، سيطبِّق المتصفّح font-variation-settings: 'slnt' 10 من فئة .slanted. بعد ذلك، سيتم تطبيق font-variation-settings: 'GRAD' -200 من فئة .grade-light. سيؤدي ذلك إلى إعادة ضبط slnt على الإعداد التلقائي وهو 0. ستكون النتيجة نصًا بدرجة خفيفة، ولكن ليس مائلًا.

لحسن الحظ، يمكننا حلّ هذه المشكلة باستخدام متغيّرات CSS:

/* Set the default values */
:root {
    --slnt: 0;
    --GRAD: 0;
}

/* Change value for these elements and their children */
.slanted {
    --slnt: 10;
}

.grade-light {
    --grad: -200;
}

.grade-normal {
    --grad: 0;
}

.grade-heavy {
    --grad: 150;
}

/* Apply whatever value is kept in the CSS variables */
.slanted,
.grade-light,
.grade-normal,
.grade-heavy {
    font-variation-settings: 'slnt' var(--slnt), 'GRAD' var(--GRAD);
}

سيتمّ تطبيق متغيّرات CSS بشكل تسلسلي، لذا إذا كان أحد العناصر (أو أحد العناصر الرئيسية) قد أعدّ slnt على 10، سيحتفظ بهذه القيمة، حتى إذا أعددت GRAD على شيء آخر. اطّلِع على مقالة إصلاح مشكلة اكتساب الخطوط المتغيّرة للخصائص للحصول على شرح مفصّل لهذه الطريقة.

يُرجى العِلم أنّ إضافة متغيرات CSS متحركة لا تعمل (حسب التصميم)، لذا لا يعمل الرمز التالي:

@keyframes width-animation {
   from { --wdth: 25; }
   to   { --wdth: 151; }
}

يجب أن تحدث هذه الصور المتحركة مباشرةً على font-variation-settings.

مكاسب الأداء

تتيح لنا الخطوط المتغيرة بتنسيق OpenType تخزين صيغ متعددة لمجموعة أنواع في ملف خط واحد. أجرى Monotype تجربة من خلال دمج 12 خطًا إدخالاً لإنشاء ثمانية أوزان، عبر ثلاثة عروض، على كل من النمطين الإيطالي والروماني. أدى تخزين 48 خطًا فرديًا في ملف خط متغيّر واحد إلى تقليل حجم الملف بنسبة% 88.

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

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

var observer = new IntersectionObserver(function(entries, observer) {
  entries.forEach(function(entry) {
    // Pause/Play the animation
    if (entry.isIntersecting) entry.target.style.animationPlayState = "running"
    else entry.target.style.animationPlayState = "paused"
  });
});

var variableTexts = document.querySelectorAll(".vf-animation");
variableTexts.forEach(function(el) { observer.observe(el); });

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

إذا كنت تستخدم Google Fonts، ننصحك بالربط المُسبَق بـ https://fonts.gstatic.com، وهو النطاق الذي يتم فيه استضافة خطوط Google. سيضمن ذلك معرفة المتصفح مبكرًا بمكان الحصول على الخطوط عندما تصادفها في CSS:

<link rel="preconnect" href="https://fonts.gstatic.com" />

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

يمكنك العثور على المزيد من النصائح حول الأداء لتحميل Google Fonts في مقالة أسرع Google Fonts.

الحلول البديلة وتوافق المتصفّحات

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

/* Set up Roboto for old browsers, only regular + bold */
@supports not (font-variation-settings: normal) {
  @font-face {
    font-family: Roboto;
    src: url('Roboto-Regular.woff2');
    font-weight: normal;
  }

  @font-face {
    font-family: Roboto;
    src: url('Roboto-Bold.woff2');
    font-weight: bold;
  }

  body {
    font-family: Roboto;
  }

  .super-bold {
    font-weight: bold;
  }
}

/* Set up Roboto for modern browsers, all weights */
@supports (font-variation-settings: normal) {
  @font-face {
    font-family: 'Roboto';
    src: url('RobotoFlex-VF.woff2') format('woff2 supports variations'),
         url('RobotoFlex-VF.woff2') format('woff2-variations');
    font-weight: 100 1000;
    font-stretch: 25% 151%;
  }

  .super-bold {
    font-weight: 1000;
  }
}

بالنسبة إلى المتصفحات القديمة، سيتم عرض النص الذي يتضمّن الفئة .super-bold بالخط الغامق العادي، لأنّ هذا هو الخط الوحيد المتوفر لدينا بالخط الغامق. عندما يتم دعم الخطوط المتغيرة، يمكننا بالفعل استخدام الوزن الأكبر وهو 1000.

لا يتوافق متصفّح Internet Explorer مع قاعدة @supports، لذا لن يعرض هذا المتصفّح أيّ تنسيق. إذا كانت هذه مشكلة، يمكنك دائمًا استخدام أحد الحيل القديمة لاستهداف المتصفّحات القديمة ذات الصلة.

إذا كنت تستخدم Google Fonts API، ستتولّى عملية تحميل الخطوط المناسبة لمتصفّحات الزوّار. لنفترض أنّك طلبت الخط Oswald بدرجة كثافة تتراوح بين 200 و700، على النحو التالي:

<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap" rel="stylesheet">

ستحصل المتصفّحات الحديثة التي يمكنها التعامل مع الخطوط المتغيرة على الخط المتغير، وسيكون متاحًا كل وزن بين 200 و700. ستظهر للإصدارات القديمة من المتصفّحات خطوط ثابتة فردية لكل وزن. في هذه الحالة، يعني ذلك أنّه سيتم تنزيل 6 ملفات خطوط: ملف للوزن 200 وملف للوزن 300 وما إلى ذلك.

شكرًا

لم تكن هذه المقالة ممكنة إلا بمساعدة الأشخاص التالين:

• مصطفى كورتولدو، مصمّم تجربة المستخدم ومدافع عن التصميم في Google
• رول نيسنكس، مصمّم/مطوّر تجربة المستخدم وخبير أسلوب الخط في Kabisa
• ديف كروسلاند، مدير البرنامج في Google Fonts
• ديفيد بيرلو، مصمّم الخطوط وخبير المقارنة بين أنماط الكتابة بخط اليد في Font Bureau
• لورانس بيني، مطوّر axis-praxis.org
• ماندي مايكل، مطوّر variablefonts.dev

صورة رئيسية من إعداد برونو مارتينز على Unسباش