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

1. مقدمة

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

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

ما ستتعرَّف عليه

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

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

سنبني في هذا التمرين المعملي بعض مفاهيم التصميم التأسيسية.

• معرفة بمقاييس الكتابة.
• معرفة Figma.
• معرفة أساسية بـ HTML وCSS.

المتطلبات

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

2. البدء

ضبط إعدادات الجهاز

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

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

نسخة مكررة من مجتمع Figma

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

تنسيق الملف

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

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

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

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

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

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

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

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

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

المزايا

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

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

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

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

1. تحدد weight (وزن) سمك الحرف. ويوفر نطاقًا كاملاً ومستمرًا من سُمك السُمك.

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

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

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

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

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

5- تحسين مظهرك

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

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

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

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

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

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

1. ألقِ نظرة على عناصر واجهة المستخدم على اليمين. تحتوي البطاقة الأولى على نوع النبات ووصفه وبعض علامات الفئة، بينما تصف باقي البطاقات تعليمات العناية بالنباتات. يكون نوع النبات منطقيًا كدور عالي التركيز، لذا استخدم "headline" (العنوان) والأسلوب. في هذه الحالة، يجب ضبطها على خيار "العنوان الرئيسي". تحتوي بطاقات الرعاية أيضًا على عنوان، ولكن ليست بنفس التوكيد، لذا اضبطها على "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

*المائل (المائل) والمائل (الإيطالي) في نمط الخط غير موثوق به.

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

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

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

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

<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) بدلاً من تمديد الخط.

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.