ما هي رموز المواد؟
تعد Material Symbols هي أحدث الرموز لدينا، حيث تدمج أكثر من 2,500 حرف رسومي في ملف خط واحد مع مجموعة واسعة من متغيرات التصميم. تتوفر الرموز بثلاثة أنماط وأربعة محاور خطوط متغيرة قابلة للتعديل (التعبئة والوزن والدرجة والحجم البصري). يمكنك الاطّلاع على المجموعة الكاملة من رموز المواد في مكتبة رموز المواد.
المحور FILL
تمنحك ميزة "Fill" القدرة على تعديل نمط الرمز الافتراضي. يمكن لأيقونة واحدة عرض كل من الحالات الشاغرة والمعبأة.
لنقل حالة انتقال، استخدم محور التعبئة للرسوم المتحركة أو التفاعل. وتكون القيم 0 للقيمة التلقائية أو 1 للملء بالكامل. إلى جانب محور الوزن، تؤثر التعبئة أيضًا على شكل الأيقونة.
المحور wght
يحدد الوزن وزن شطب الرمز، مع نطاق من الأوزان يتراوح بين رفيع (100) وغامق (700). يمكن أن يؤثر الوزن أيضًا على الحجم الإجمالي للرمز.
المحور GRAD
يؤثر الوزن والدرجة على سمك الرمز. تعد تعديلات الدرجة أكثر دقة من تعديلات الوزن ولها تأثير بسيط على حجم الرمز.
تتوفّر الدرجة أيضًا في بعض الخطوط النصية. يمكنك مطابقة مستويات التدرج بين النص والرموز للحصول على تأثير مرئي متناغم. على سبيل المثال، إذا كان خط النص يحتوي على قيمة درجة -25، يمكن للرموز مطابقتها بقيمة مناسبة، على سبيل المثال -25.
يمكنك استخدام الدرجة للاحتياجات المختلفة:
تركيز منخفض (على سبيل المثال -25 درجة): لتقليل اللمعان بجانب رمز فاتح على خلفية داكنة، استخدم درجة منخفضة.
تركيز عالٍ (درجة 200 مثلاً): لتمييز رمز، يجب زيادة الدرجة الموجبة.
المحور opsz
وتتراوح الأحجام البصرية بين 20 وحدة بكسل مستقلة الكثافة و48 بكسل مستقل الكثافة.
لكي تبدو الصورة بنفس الحجم بأحجام مختلفة، يتغير سُمك الخط (السُمك) مع تغيير حجم الرمز. يوفر الحجم البصري طريقة لضبط سُمك الخط تلقائيًا عند زيادة حجم الرمز أو تقليله.
الحصول على رموز المواد
تتوفر Material Symbols بعدة تنسيقات وهي مناسبة لأنواع مختلفة من المشروعات والأنظمة الأساسية، لكل من المطورين في تطبيقاتهم والمصممين في نماذجهم التجريبية أو نماذجهم الأولية.
الترخيص
تتوفّر رموز Materials ضمن إصدار ترخيص Apache 2.0.
تصفُّح الرموز الفردية وتنزيلها
تتوفر المجموعة الكاملة من رموز المواد في مكتبة رموز المواد بتنسيق SVG أو PNG. وهي مناسبة للويب وAndroid وiOS، أو مع أي أدوات للمصممين.
مستودع Git
يحتوي مستودع git على المجموعة الكاملة لرموز المواد بتنسيق SVG.
$ git clone https://github.com/google/material-design-icons
استخدام رموز المواد
الاستخدام في الويب
خط "رموز المواد" هو أسهل طريقة لدمج رموز المواد في مشاريع الويب.
يتم حزم الأيقونات في خط واحد بحيث يمكن لمطوري الويب دمج هذه الأيقونات بسهولة باستخدام بضعة أسطر من التعليمات البرمجية فقط.
خط ثابت مع Google Fonts
أسهل طريقة لإعداد خطوط الرموز لاستخدامها في أي صفحة ويب هي من خلال Google Fonts. تضمين سطر HTML الوحيد هذا:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
يتضمن المقتطف أعلاه الإعدادات التلقائية لكل محور، بقيمة الوزن 400، والحجم البصري 48، والدرجة عند 0، وملء (أيضًا 0.)
استخدم Fonts CSS API لضبط قيم المحاور المختلفة. يمكنك الاطّلاع على الأمثلة التالية:
خط المتغير مع Google Fonts
إذا كنت تحرّك الرموز عبر CSS، أو تريد التحكم بشكل أدق في ميزات الرموز، فيمكنك استخدام الخط المتغير في رموز Google. باستخدام النطاقات، بالتنسيق number..number،
يمكننا تحميل الخط المتغير بأكمله. اطّلِع على مقالة
هل يمكنني استخدام ميزة "الخطوط المتغيّرة"؟
لمعرفة ما إذا كان المستخدمون سيتمكّنون من تحميل الخط المتغيّر، على الأرجح سيكونون قادرين على تحميل الخط المتغيّر. وفي ما يلي بعض الأمثلة:
أو حتى أضِف تأثيرات حركية إليها!
الاستضافة الذاتية للخط
استضِف
خط الرمز
في موقع تتحكم به لتحديد وقت تحديث مادة العرض. على سبيل المثال إذا كان عنوان URL هو https://example.com/material-symbols.woff، أضِف قاعدة CSS التالية:
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
src: url(https://example.com/material-symbols.woff) format('woff');
}
لعرض الخط بشكل صحيح، يجب تعريف قواعد CSS لعرض الرمز. يتم عرض هذه القواعد عادةً كجزء من ورقة أنماط واجهة برمجة التطبيقات Google Fonts، ولكن يجب تضمينها يدويًا في مشاريعك عند الاستضافة الذاتية:
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
}
استخدام الأيقونات في HTML
تستخدم الأمثلة المذكورة أعلاه ميزة مطبعية تسمى الحروف المزدوجة، والتي تسمح بعرض حرف رسومي للرمز من خلال استخدام اسمه النصي. يستبدل متصفح الويب تلقائيًا حرف النص بخط متجه الرمز ويوفر تعليمة برمجية أكثر قابلية للقراءة من مرجع الأحرف الرقمية المكافئ. على سبيل المثال، في رمز HTML، سيكون لديك arrow_forward لتمثيل الرمز بدلاً من . بالنسبة إلى الرموز الأخرى، استخدِم حالة الثعبان لاسم الرمز
(أي استخدِم شرطات سفلية بدلاً من المسافات).
ويتم دعم هذه الميزة في معظم المتصفحات الحديثة على كل من أجهزة الكمبيوتر المكتبية والأجهزة المحمولة. يمكنك الاطّلاع على مقالة هل يمكن استخدام الأحرف المزدوجة في؟ لمعرفة ما إذا كان المستخدمون قادرين على معالجة الأحرف المزدوجة في الغالب.
إذا كنت لا تريد التوافق مع المتصفحات التي لا تتيح الأحرف المزدوجة، فحدّد الأيقونات باستخدام مراجع الأحرف الرقمية (المعروفة أيضًا بنقاط الكود) كما في المثال أدناه:
يمكنك العثور على أسماء الرموز ونقاط الرموز في مكتبة رموز المواد، وذلك من خلال اختيار أي رمز وفتح لوحة خط الرموز. يحتوي كل خط رمز على فهرس نقاط رموز في مستودع git في Google Fonts يعرض المجموعة الكاملة من الأسماء ورموز الأحرف.
تصميم الرموز في Material Design
تم تصميم هذه الرموز لاتّباع إرشادات التصميم المتعدد الأبعاد، وتظهر بأفضل شكل عند استخدام أحجام الرموز وألوانها المقترَحة. تسهل الأنماط أدناه تطبيق الأحجام والألوان وحالات النشاط الموصى بها.
الاستخدام في Android
في مكتبة رموز المواد، تكون جميع الأيقونات بتنسيق Vector Drawable. للحصول على مزيد من المعلومات، يمكنك الاطّلاع على مستندات Android Vector Asset Studio.
الاستخدام في نظام التشغيل iOS
تتوفر الأيقونات أيضًا بتنسيق Apple Symbols. لمعرفة المزيد عنها، يمكنك الاطلاع على نظرة عامة وإرشادات الاستخدام الرسمية لشركة Apple Symbols.
الاستخدام في Flutter
من المقرّر إتاحة استخدام Flutter لرموز Material Symbols. تابع أخبارنا باستمرار للحصول على التحديثات.