() translation by (you can also view the original English article)
الخطوط المتغيرة هي، باختصار، ملفات الخطوط التي لها إعدادات يمكنك تغييرها بمهارة، أو تعديل بشكل كبير لمظهر الخط. انهم مضبوطين لصنع فرق كبير في الكتابة على شبكة الإنترنت – دعونا نلقي نظرة اقرب!
مشاهدة الفيديو المفسر
الخطوط المتغيرة لمصممي الويب
من خلال إعدادات الخط المتغير (التي تسمى محاور) يمكنك أن تأخذ ملف خط واحد وخلق نوع الاختلافات تمكنت سابقا من الخوض فيها فقط عن طريق استخدام ملفات خطوط متعددة.
على سبيل المثال، مع عائلة خط عادي، إذا أردت نسخة بوزن خفيف وعادي، وجريء،فعليك التحميل بثلاثة ملفات خطوط مختلفة.
مع ذلك، مع خط متغير باعتباره محور وزن يمكنك ضبط الوزن عن طريق CSS للحصول على المظهر الخفيف،العادي، والجريء من ملف واحد:
1 |
.light { |
2 |
font-variation-settings: "wght" 66; |
3 |
}
|
4 |
|
5 |
.regular { |
6 |
font-variation-settings: "wght" 84; |
7 |
}
|
8 |
|
9 |
.bold { |
10 |
font-variation-settings: "wght" 154; |
11 |
}
|
مع هذا النهج تحصل على نفس المظهر المطبعي، ولكن مع مرات تحميل متحسنة جدا. حيث كان سابقا يجب عليك التقليل من عدد المتغيرات التي تقوم بتحميلها إلى صفحة الويب، مع خطوط متغيرة لم يعد ذلك مشكلة الان، لديك عدد كبير من المتغيرات الان بين اصبعيك:
تغير النمط
بقدر ما يذهب تغير النمط بعيدا، فإنه لا يتوقف فقط هناك. انك غير مقتصر فقط على أنواع الاختلافات التي اعتدتها، مثل الوزن الطبيعي، أو مائل.
أولاً، يمكن أن يكون لأي محور القيمة الخاصة به معينة في أي مكان على طول معدل انزلاقي، ليس فقط في مجموعة القيم. حتى إذا كنت تبحث عن وزن في مكان ما بين عادية وجريئة، ذلك تماما ممكن . أو إذا كنت تريد خطك المائل لينحني أقل قليلاً ، أو اردت عرض رموزك أن تكون قليلاً أكثر من المعيار، القوة في يديك. توليف دقيق للإعدادات الخاصة بك بما تحتاجه.
ثانيا، الخطوط يمكنها استخدام أي محاور يفكر بها المصمم! القي نظرة على الإعدادات المتوفرة لبيتكونت:
اعتماداً على الخط، ستجد المحاور التي تعطيك السيطرة على ثغرات المرسام بالاستنسل، ظلال الهبوط، أو محطات الرمز، الخيارات لا حدود لها.
رياح التغيير
متغيرات الخطوط يكون لها تأثير كبير على الطريقة التي نعمل بها كمصممي ويب. انها ستمكننا من تحقيق قدر أكبر من التنوع والتحكم، بينما في نفس الوقت الحد من سرعات التحميل عندنا. انها أيضا ستتيح لنا التفرع في ابداعنا المطبعي في الطرق التي كانت مستحيلة من الناحية الفنية قبل .
للبدء مع خطوط متغيرة لقد وضعنا معا دورة ترشدك خلال جميع الجوانب الأكثر أهمية لكيفية عملها، وتقودك لإعداد الأدوات التي ستحتاجها، ويرشدك خلال ترميز CSS الذي يتحكم بخطوط متغيرة، ويوضح لك كيفية إنشاء أساسات للمستعرضات التي لا تملك بعد الدعم.
