الانتقال إلى خطوط متغيّرة

1. مقدمة

تاريخ آخر تعديل: 05/11/22

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

أهداف الدورة التعليمية

• التعرّف على الخطوط المتغيّرة
• كيفية تخصيص الخطوط باستخدامها
• كيفية تطبيق الخطوط المتغيّرة على تصاميمك
• كيفية تنفيذ الخطوط المتغيرة باستخدام Google Fonts API وفي CSS

المتطلبات الأساسية

في هذا الدرس التطبيقي، سنستند إلى بعض مفاهيم التصميم الأساسية.

• معرفة مقاييس الخطوط
• معرفة Figma
• معرفة أساسية بلغتَي HTML وCSS

المتطلبات

• حساب Figma
• ملف designlab في Figma
• أداة تعديل الرموز المفضّلة للويب

2. البدء

الإعداد

للبدء، عليك الوصول إلى ملف Designlab Figma. يتضمّن ملف Figma كل ما تحتاج إليه في المختبر. يمكنك إما تنزيل الملف واستيراده أو تكراره من "مجتمع Figma".

أولاً، سجِّل الدخول إلى Figma أو أنشئ حسابًا.

مكرّر من "مجتمع Figma"

انتقِل إلى الملف الانتقال إلى الخطوط المتغيّرة أو ابحث عن "الانتقال إلى الخطوط المتغيّرة" في مجتمع Figma. انقر على تكرار في أعلى يسار الصفحة لنسخ الملف إلى ملفاتك.

تنسيق الملف

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

يرشدك هذا الدرس التطبيقي حول الترميز إلى هذه المفاهيم والتمارين بتفصيل أكبر. يمكنك قراءة هذا الدرس العملي للتعرّف أكثر على ميزات Material You الجديدة.

بدءًا بلوحة العرض Intro، هناك أزرار تربط لوحات العرض ببعضها البعض بالترتيب. للوصول إلى الرابط، انقر على الزر.

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

قبل البدء، يجب التأكّد من توفّر خط متغير. يستخدم هذا الملف خط Roboto Flex المتوفّر حاليًا في Figma، أو يمكنك تنزيله من fonts.google.com.

3- ما هي الخطوط المتغيّرة؟

الخطوط المتغيرة هي شكل جديد ومبتكر من أشكال الخطوط يتيح للمستخدمين التحكّم في أنواع الخطوط والرموز. Roboto Serif وRoboto Flex هما خطان جديدان تم تصميمهما خصيصًا لتكنولوجيا الخطوط المتغيرة، ولكل منهما مجموعة كبيرة من المحاور.

التعبير الجمالي والمحاور

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

المزايا

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

4. استخدام الخطوط المتغيّرة في التصميم

تغيير المحاور

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

1. تحدّد الكثافة سُمك الحرف. ويوفّر مجموعة كاملة ومتواصلة من سُمك الخطوط.

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

3. يمكنك تعديل النمط من عمودي إلى مائل، وهو ما يعرفه مصمّمو الخطوط باسم النمط "المائل". على الرغم من أنّ هذا النوع من الخطوط نادر، يمكن أن يعمل خط Slant في الاتجاه الآخر، ويُعرف باسم "الخط المائل العكسي".

4. الدرجة هي أداة تعديل ثانوية للوزن المرئي للخط الطباعي وهي مستقلة عن محور الوزن. يؤثر كل من "الوزن" و"الدرجة" في سُمك الحرف، ولكن التعديلات باستخدام "الدرجة" تكون أكثر دقة.

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

يمكنك الاطّلاع على العرض التوضيحي للخطوط المتغيرة لتجربة محاور الخطوط المتغيرة خارج Figma.

5- الاستفادة من الأنماط

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

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

1. لنبدأ بتخصيص مقياس الخط باستخدام نص أساسي. يتيح لنا ذلك ضبط حجم الخط الأساسي للموقع الإلكتروني أولاً ثم تعديله بصريًا. يكون الإعداد التلقائي للنص الكبير في الصفحة هو 18 نقطة، ويتم اختياره وضبطه على Roboto Flex. كانت عملية التعديل لتحسين سهولة القراءة تتطلّب تغيير حجم الخط ووزنه، ما يعني استخدام ملف خط آخر، ولكن يمكننا الآن ضبط بعض المحاور بدقة. اضبط الحجم المرئي والدرجة والوزن.
2. انقر على التصنيف. تكون التصنيفات أكثر نفعًا، ويتم استخدامها في سياقات أقصر وأصغر، مثل الأزرار. اضبط درجة اللون بصريًا للسماح بظهور التصنيف بشكل صحيح على حاويات الأزرار والرقائق.
3. استمر في تحسينها باستخدام العنوان والعنوان الرئيسي والعرض. تُستخدم هذه العناصر الثلاثة للنصوص القصيرة التي تتضمّن مستوى متوسطًا إلى مرتفعًا من التأكيد، مثل عناوين الصفحات والأقسام. يمكن أن يكون العنوان الرئيسي والعنوان أكثر تعبيرًا بسبب حجمهما وأهميتهما الكبيرة. يمكنك تجربة جميع المحاور هنا.
4. بعد اختيار النوع، انقر على النقاط الأربع وأضِف (+) لضبط نمط نص، ما يضمن إعدادات نوع متسقة وقابلة لإعادة الاستخدام.

يمكنك إنشاء مقياس أنواع Material التلقائي كأنماط Figma باستخدام أداة Material Theme Builder، أو عن طريق تكرار مجموعة أدوات تصميم M3.

6. التطبيق على واجهة المستخدم

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

1. ألقِ نظرة على عناصر واجهة المستخدم على يمين الصفحة. تحتوي البطاقة الأولى على نوع نبات ووصف وبعض علامات الفئات، بينما تصف بقية البطاقات تعليمات العناية بالنبات. نوع النبات منطقي كدور ذي أهمية عالية، لذا استخدِم نمط "العنوان الرئيسي". اضبطه على ما سبق أن أعددناه كعنوان. تحتوي بطاقات الرعاية أيضًا على عنوان، ولكن ليس بنفس درجة الأهمية، لذا يجب ضبطها على "title".
2. يمكن تعيين نسخة تفاصيل النبتة والتعليمات إلى "نص كبير"، بينما يمكن تعيين تصنيفات الفئات إلى "تصنيف كبير".
3. جرِّب أدوارًا مختلفة، وعدِّل عناصر واجهة المستخدم ومقياس الكتابة للعثور على التوازن المناسب.

7. التنفيذ في الرمز البرمجي

إنّ تنفيذ الخطوط المتغيرة في الرمز باستخدام CSS هو طريقة مشابهة لأي خط ويب يستخدم خدمة توصيل الخطوط لتحميل الخط وتخصيصه باستخدام خصائص CSS.

سنستخدم رموز HTML وCSS الأساسية للتنفيذ، وليس MWC أو أي إطار عمل آخر.

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

استخدِم Google Fonts كخدمة لتوصيل الخطوط من أجل تنفيذ عدد كبير من الخطوط، بما في ذلك الخطوط المتغيرة، على موقعك الإلكتروني بطريقة سهلة.

يمكنك استكشاف الخطوط المتغيرة المتوفرة من خلال الانتقال إلى fonts.google.com. ضَع علامة في المربّع عرض الخطوط المتغيرة فقط ضمن البحث لتطبيق الفلتر. تتضمّن الخطوط المتغيرة ساحة لعب بالقرب من أسفل الصفحة حيث يمكنك ضبط أشرطة التمرير لكل محور من المحاور المتاحة في المجموعة.

تنسيق باستخدام CSS

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

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

Axes	Abbreviation	CSS property
Weight	wght	font-weight
Width	wdth	font-stretch
Slant	slnt	font-style*
Italic	ital	font-style*
Optical Size	opsz	font-optical-sizing

*لا يمكن الاعتماد على ميزتَي "الميل" (slnt) و"المائل" (ital) في font-style.

8. استيراد الخطوط باستخدام Google Fonts API

كنا نستخدم خط Roboto فقط، ولكن انظر إلى جميع الخطوط المتوفّرة لنا الآن على fonts.google.com.

سنلتزم باستخدام خط Roboto في بقية الدرس التطبيقي حول الترميز، وسنخصّص نوع الخط في البطاقات التالية استنادًا إلى التمرين السابق.

1. انسخ هذا الرمز الذي يحتوي على نموذج واجهة المستخدم للبطاقة في بيئة التطوير المتكاملة على الويب التي تختارها.

<html>
 <title>Migrating to Variable fonts</title>
 <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<style>
/* imports __________________ */


/* body __________________________ */
body {
 font-size: 18px;
 color: #21005D;
 background: #E8DEF8;
}
/* typography __________________________ */

h1 {   
   line-height: 0;
/* add font styles for headline */
}

h2 {
   line-height: 0;
/* add font styles for care titles */
}

p {
   margin: 0;
   line-height: 150%;
/* add font styles for body copy */
}

.label {
/* add font styles for labels */
}

/* layout __________________________ */
article {
   margin: 16px auto;
   padding: 16px 24px;
   width: 30%;
   background: #FFFFFF;
   border: 1px solid #4F8438;
   border-radius: 24px;
}
div.labels {
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 12px;
}
span.label {
   margin: 8px 0;
   padding: 4px 8px;
   background: #C4EED0;
   border-radius: 8px;
}
article.care {
   padding: 8px 24px;
   display: flex;
   flex-direction: row;
   align-items: center;
   gap: 8px;
}
</style>
  <body>
   <article>
     <h1>philodendron</h1>
     <p>The philodendron is part of a large family of plants comprising 489 spcies. Known for their large interesting leaves, growing mainly in tropical climates. Most philodendron make for ideal houseplants, with some more rare exceptions are easy to propogate and require less attention as some fussier plant families</p>
     <div class="labels">
       <span class="label">easy care</span>
       <span class="label">tropical</span>
     </div>
   </article>

   <article class="care">
       <span class="material-icons">water</span>
       <h2>water</h2>
       <p>Water when dry</p>
   </article>

   <article class="care">
       <span class="material-icons">light</span>
       <h2>light</h2>
       <p>Bright indirect light</p>
   </article>
 </body>
 </html>

2. دوِّن مواصفات النمط التي حدّدناها في التمرين الأخير لكل من العنوان الرئيسي والعنوان والنص الأساسي والتصنيف. مع أخذ هذه الاعتبارات في الحسبان، انتقِل إلى صفحة Roboto Flex. اضبط أشرطة التمرير لتتطابق مع المواصفات التي حدّدتها في Figma، ثم انقر على اختيار هذا النمط لكل منها لإضافتها إلى الدرج الجانبي.
3. ضمن الدرج، ابحث عن "استخدام على الويب" تحت الأنماط المحدّدة. هناك طريقتان لإضافة الخط إلى الرمز البرمجي: باستخدام <link> أو @import. نحتاج إلى واحدة فقط، لذا لنختار @import.
4. انسخ المحتوى من @import إلى الفاصلة المنقوطة، والصِقه داخل علامات الأنماط بعد تعليق الاستيراد.
5. بما أنّ Roboto Flex هي مجموعة الخطوط الوحيدة المستخدَمة، اضبط النص الأساسي لاستدعاء مجموعة الخطوط من خلال إضافة "قواعد CSS لتحديد المجموعات" المُدرَجة ضمن رمز الاستيراد.

body {
 font-family: 'Roboto Serif', sans-serif;
 font-size: 18px;
 color: #0C332A;
 background: rgb(247, 245, 245);
}

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

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

9- خصائص الخطوط المتغيرة في CSS

بعد استيراد الخط، لنرجع إلى Figma لاسترداد بعض خصائص CSS لتصميمها، ولنلقِ نظرة على خاصية font-variation-settings CSS.

1. بدءًا من العناوين الرئيسية h1 المحدّدة في اللوحة اليمنى، انقر على علامة التبويب فحص في أعلى الصفحة. يؤدي ذلك إلى تبديل اللوحة إلى وضع فحص الرمز لتسليم العمل إلى المطوّر. الرمز هو القسم الأخير.
2. إذا لم يسبق لك إجراء ذلك، غيِّر القائمة المنسدلة للتنسيق إلى CSS. يتم إدراج السمات العادية، إذا تم استخدامها (font-weight, font-stretch, font-style, font-optical-sizing)، متبوعةً بالسمة font-variation-settings ذات المستوى المنخفض التي تحتوي على محاور مخصّصة غير مسجّلة. استخدِم السمات العادية أولاً، قبل اللجوء إلى font-variation-settings.

تستخدم Figma إعدادات اختلاف الخط للعرض (wdth) بدلاً من font-stretch.

3. انسخ رمز CSS هذا المرتبط بالنوع لتصميم أداة اختيار h1.

h1 {    
    line-height: 0;
    font-size: 36px;
    font-weight: 125;
    font-stretch: 167%;
}

4. يمكن نسخ نمط عنوان بطاقة الرعاية إلى h2. كرِّر العملية نفسها مع نص الرسالة، وانسخه في p. يمكن نسخ أنماط التصنيفات إلى .label

10. تهانينا

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

الخطوات التالية

• اطّلِع على إرشادات أنواع Material 3.
• يمكنك الاطّلاع على مزيد من المعلومات حول Roboto Flex.
• طبِّق هذه النصائح على تصميماتك الخاصة.

إذا كانت لديك أي أسئلة، يمكنك طرحها علينا في أي وقت باستخدام @MaterialDesign على Twitter.

يمكنك متابعة المزيد من المحتوى والبرامج التعليمية حول التصميم على youtube.com/MaterialDesign