ما هي رموز المواد؟
رموز المواد هي أحدث رموزنا، حيث تدمج أكثر من 2500 حرف رسومي في ملف خط واحد بمجموعة كبيرة من متغيرات التصميم. تتوفر الرموز في ثلاثة أنماط وأربعة محاور خطوط متغيرة قابلة للتعديل (التعبئة والوزن والدرجة الحجم البصري). يمكنك الاطلاع على المجموعة الكاملة من رموز Material في مكتبة رموز المواد.
المحور FILL
يمنحك تطبيق fill إمكانية تعديل نمط الرموز الافتراضي. يمكن لأيقونة واحدة لعرض الحالات غير المعبأة والمعبأة.
لنقل انتقال الحالة، استخدم محور التعبئة للرسم المتحرك أو التفاعل. القيم هي 0 للقيمة الافتراضية أو 1 للملء بالكامل. إلى جانب الوزن فإن التعبئة تؤثر أيضًا على مظهر الأيقونة.
المحور wght
يحدد الوزن وزن خط الرمز، وذلك من خلال نطاق من الأوزان بين رفيع (100) وغامق (700). ويمكن أن يؤثر الوزن أيضًا في الحجم الكلي الرمز.
المحور GRAD
يؤثر الوزن والدرجة على سُمك الرمز. التعديلات التي أُجريت على الدرجة هي أكثر دقة من تعديلات الوزن، ويكون لها تأثير بسيط في حجم الرمز.
تتوفّر الدرجة أيضًا في بعض الخطوط النصية. يمكنك مطابقة مستويات الدرجات بين والنصوص والرموز للحصول على تأثير مرئي متناغم. على سبيل المثال، إذا كان خط النص له قيمة الدرجة -25، ويمكن أن تتطابق الرموز معه مع قيمة مناسبة، لنفترض -25.
يمكنك استخدام الدرجة للاحتياجات المختلفة:
توكيد منخفض (على سبيل المثال، درجة 25-): لتقليل اللمعان لرمز ضوء على خلفية داكنة الخلفية، فاستخدم درجة منخفضة.
توكيد مرتفع (مثلاً، 200 درجة): لتمييز رمز ما، عليك زيادة القيمة الموجبة. .
المحور opsz
وتتراوح الأحجام البصرية بين 20 بكسل مستقل الكثافة و48 بكسل مستقل الكثافة (dp).
لكي تبدو الصورة متشابهة بأحجام مختلفة، كثافة الخط (السُمك) يتغير مع تغير حجم الأيقونة. يوفر الحجم البصري طريقة ضبط سُمك الخط عند زيادة حجم الرمز أو تقليله.
الحصول على رموز المواد
تتوفر رموز المواد بتنسيقات متعددة ومناسبة لمختلف التنسيقات المشروعات والأنظمة الأساسية، سواء للمطوّرين في تطبيقاتهم أو للمصممين في نماذجهم التجريبية أو النماذج الأوّلية.
الترخيص
تتوفر رموز المواد ضمن الإصدار 2.0 من ترخيص Apache.
تصفح وتنزيل رموز فردية
تتوفر المجموعة الكاملة من رموز Material من خلال مكتبة رموز المواد بتنسيق SVG أو PNG. وهي مناسبة للويب وAndroid وiOS، أو مع أي أدوات المصمم.
مستودع Git
تشير رسالة الأشكال البيانية مستودع git على المجموعة الكاملة من رموز المواد بتنسيق SVG.
$ git clone https://github.com/google/material-design-icons
استخدام رموز المواد
الاستخدام في الويب
يُعد خط Material Symbols أسهل طريقة لدمج رموز المواد إلى مشروعات ويب.
يتم حزم الرموز في خط واحد حتى يتمكن مطورو الويب من ودمج هذه الأيقونات مع بضعة أسطر فقط من التعليمات البرمجية.
خط ثابت مع 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"
إذا كنت تحرّك الرموز عبر 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 API، ولكن يجب تضمينها يدويًا في مشاريعك عند الاستضافة الذاتية:
.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 لتمثيل الرمز،
بدلاً من . بالنسبة إلى الرموز الأخرى، استخدِم حالة الثعبان لاسم الرمز.
(أي استبدال المسافات بشرطات سفلية).
تتوفّر هذه الميزة في معظم المتصفّحات الحديثة على كلّ من أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة. الأجهزة. عرض هل يمكنني استخدام دعم الأحرف المتصلة في تطبيق هل يمكنني استخدام لمعرفة ما إذا كان المستخدمون قادرين على معالجة الحروف المركّبة، فمن المرجح أن يمكن.
إذا كنت بحاجة إلى التوافق مع المتصفحات التي لا تتوافق مع الأحرف الساكنة، فحدد للأيقونات باستخدام مراجع أحرف رقمية (المعروفة أيضًا باسم نقاط الكود) مثل مثال أدناه:
ابحث عن كل من أسماء الأيقونات ونقاط الرموز على مكتبة رموز المواد عن طريق تحديد أي أيقونة وفتح لوحة خط الرمز. كل خط من خطوط الأيقونة له مؤشر نقاط الترميز في Google Fonts مستودع git تعرض المجموعة الكاملة من الأسماء ورموز الأحرف.
تغيير نمط الأيقونات في Material Design
تم تصميم هذه الأيقونات لاتباع إرشادات التصميم المتعدد الأبعاد وهي تظهر بشكل أفضل عند استخدام أحجام الرموز والألوان الموصى بها. الأنماط أدناه سهولة تطبيق الأحجام والألوان وحالات النشاط الموصى بها.
الاستخدام في Android
في مكتبة رموز المواد، تكون جميع الأيقونات بتنسيق المتجه القابل للرسم. إلى لمعرفة المزيد، يمكنك الاطلاع على مستندات Android Vector Asset Studio
الاستخدام في iOS
تتوفر الرموز أيضًا بتنسيق Apple Symbols. لمعرفة المزيد عنها، تحقق من رموز Apple الرسمية نظرة عامة أو إرشادات الاستخدام.
الاستخدام في Flutter
تم التخطيط لإتاحة استخدام Flutter لرموز المواد. ننصحك بمتابعتنا لمعرفة آخر الأخبار.