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

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

1. مقدمة

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

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

المُعطيات

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

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

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

معرفة مقاييس الأنواع
معرفة ببرنامج Figma
معرفة أساسية بلغتَي HTML وCSS

المتطلبات

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

2. البدء

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

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

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

تكرار النموذج من "منتدى Figma"

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

تنسيق الملف

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

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

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

البحث عن خط متغيّر

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

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

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

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

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

المزايا

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

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

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

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

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

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

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

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

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

اطّلِع على العرض التجريبي للخطوط المتغيّرة للعب بأعمدة الخطوط المتغيّرة خارج Figma.

5- تحسين الأداء

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

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

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

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

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

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

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

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 في بقية جلسات Codelab وسنخصّص النوع في البطاقات التالية استنادًا إلى التمرين السابق.

انسخ هذا الرمز الذي يحتوي على نموذج واجهة مستخدم البطاقة إلى بيئة تطوير البرامج المتكاملة (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>

دوِّن مواصفات الأنماط التي ضبطناها في التمرين الأخير لكلّ من العنوان والعنوان والنص والتصنيف. مع أخذ هذه النقاط في الاعتبار، انتقِل إلى صفحة Roboto Flex. اضبط أشرطة التمرير لتتطابق مع المواصفات التي ضبطتها في Figma، ثم اختَر هذا النمط لكل منها لإضافته إلى الدرج الجانبي.
ضمن الدرج، ابحث عن "الاستخدام على الويب" ضمن الأنماط المحدّدة. هناك طريقتان لإضافة الخط إلى الرمز البرمجي: باستخدام <link> أو @import. ستحتاج إلى واحدة فقط، لنختار @import.
انسخ من @import إلى الفاصلة المنقوطة والصقه ضمن علامات الأنماط بعد تعليق الاستيراد.
بما أنّ 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.

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

يستخدم Figma سمة font-variation-settings للعرض (wdth) بدلاً من سمة font-stretch.

انسخ رمز CSS هذا المرتبط بنوع النص لضبط نمط محدد h1.

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

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

10. تهانينا

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

إذا كانت لديك أسئلة، يُرجى التواصل معنا في أي وقت على ‎@MaterialDesign على Twitter.

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