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

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

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

Dave Crossland

Mustafa Kurtuldu

Roel Nieskens

Thomas Steiner

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

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

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

مقدمة

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

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

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

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

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

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

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

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

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

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

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

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

الحرف "أ" معروض بدرجات مختلفة من السماكة — أعلاه: مخطّط توضيحي لمحور "السُمك" لخطّ Roboto.

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

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

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

مائل

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

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

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

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

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

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

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

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

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

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

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

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

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

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

تعبير مثير

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

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

Animation

خط Zycon، مصمّم للرسوم المتحركة من قِبل "ديفيد بيرلو"، مصمّم الخطوط و مطوّر الخطوط في Font Bureau

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

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

بعض الأمثلة على الصور المتحركة التي تظهر عند التمرير بمؤشر الماوس من خط الرموز الملونة Anicon

Finesse

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

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

يتيح لك محور XTRA في Amstelvar تعديل قيمة "الأبيض" لكل ألف، كما هو موضّح أعلاه. باستخدام أجزاء صغيرة من 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 style. من خلال تحديد النطاق في @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;
}

تغيُّر محور "الوزن" في 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;
}

يتم تغيير محور Slant في Roboto Flex من الحد الأدنى إلى الحد الأقصى.

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

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

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

يتم تغيير محور "الصف" في 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.

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

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

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

صورة البطل تقدّمها برونو مارتينز على Unsplash.