تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

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

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

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

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

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

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

مقدمة

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

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

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

تركيبة نموذجية وقائمة بالأنماط المختلفة لعائلة Roboto — على اليسار: عيّنة من مجموعة الخطوط الطباعية من Roboto. على اليمين: أنماط معيّنة ضمن العائلة

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

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

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

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

بنية الخط المتغير

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

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

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

الحرف 'A' معروض بأوزان مختلفة — أعلاه: رسم توضيحي لمحور الوزن للخط الطباعي Roboto.

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

Roboto Flex في مجموعات عشوائية من العرض والوزن

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

مائل

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

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

مثال على محاور الوزن للخط الطباعي Amstelvar — خطوط "n" لأمستلفار بخط مائل (12 نقطة، وزن عادي، عرض عادي)، والرومانية. صورة مقدَّمة من "ديفيد بيرلو"، مصمم خطوط وطباعة في Font Bureau

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

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

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

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

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

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

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

أسماء المحاور وقيم CSS
الوزن	`wght`
العرض	`wdth`
منحدر	`slnt`
الحجم البصري	`opsz`
مائل	`ital`

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

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

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

تعبير مثير

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

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

Animation

Typeface Zycon صُمِّمت لإنشاء الصور المتحركة من قبل "ديفيد بيرلو"، مصمم خطوط وطباعة في Font Bureau.

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

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

بعض الأمثلة على الرسوم المتحركة عند التمرير من خط رمز الألوان في Anicon

الدقة

أمستلفار يستخدم أجزاء صغيرة من XTRA في اتجاهين عكسيين لكي يكون عرض الكلمات متساويًا

يقدّم كل من 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 Fonts أيضًا خطوطًا احتياطية ثابتة في حال عدم توافق الخطوط المتغيّرة.

استخدام الأوزان والعرض

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

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

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

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

تم تغيير محور الوزن لشركة Roboto Flex من الحد الأدنى إلى الحد الأقصى.

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

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

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

يتم تغيير محور العرض Roboto Flex' من الحد الأدنى إلى الحد الأقصى.

استخدام الخط المائل والمائل

المحور 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;
}

تغيير المحور المائل لشركة Roboto Flex' من الحد الأدنى إلى الحد الأقصى.

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

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

الحرف "a" المعروض بأحجام بصرية مختلفة — إنّ الحرف "a" في لعبة Roboto Flex بأحجام وحدات بكسل مختلفة، ثم يتم تغيير حجمه ليكون بنفس الحجم، يوضّح الاختلافات في التصميم. تجربة الميزة بنفسك على Codepen

تم طرح سمة 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 بعض المحاور المخصّصة، وأهم هذه المحاور هي الدرجة (GRAD). يُعد محور الدرجة مثيرًا للاهتمام لأنّه يغيّر حجم الخط بدون تغيير العرض، وبالتالي لا تتغير فواصل الأسطر. من خلال التغيير في محور الدرجة، يمكنك تجنب الاضطرار إلى تغيير محور الوزن الذي يؤثر في العرض الإجمالي، ثم التغييرات إلى محور العرض الذي يؤثر في الوزن الإجمالي.

تم تغيير محور الدرجات لشركة Roboto Flex من الحد الأدنى إلى الحد الأقصى.

نظرًا لأن 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.

لاستخدام جميع المحاور أو نطاقات القيم المتاحة، يجب إنشاء عنوان URL يدويًا وواجهة برمجة تطبيقات 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 regex بدون أي شيء آخر، فقد لا ترى زيادة صافية في حجم الخط إذا كنت ستقوم بالتبديل إلى خط متغير مع العديد من المحاور. وكما هي الحال دائمًا، يعتمد ذلك على حالة الاستخدام.

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

العناصر الاحتياطية ودعم المتصفح

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

/* 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.

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

إذا كنت تستخدم 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

صورة رئيسية من تصوير برونو مارتينز على UnLaunch