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

دليل رموز Material

ما هي رموز المواد؟

رموز Material هي أحدث رموزنا، وهي تجمع أكثر من 2,500 رمز فيملف خط واحد يتضمّن مجموعة كبيرة من صيغ التصميم. تتوفر الرموز في ثلاثة أنماط وأربعة محاور خطوط متغيرة قابلة للتعديل (التعبئة والوزن والدرجة الحجم البصري). اطّلِع على المجموعة الكاملة من رموز Material في مكتبة رموزال Material .

المحور `FILL`

يمنحك خيار "التعبئة" إمكانية تعديل نمط الرمز التلقائي. يمكن أن يعرض رمز واحد حالتَي التعبئة وعدم التعبئة.

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

المحور `wght`

يحدد الوزن وزن خط الرمز، وذلك من خلال نطاق من الأوزان بين رفيع (100) وغامق (700). يمكن أن يؤثر الوزن أيضًا في الحجم العام للرمز.

محور `GRAD`

محور وضع الدرجات
التصور

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

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

يمكنك استخدام الدرجة للاحتياجات المختلفة:

توكيد منخفض (على سبيل المثال، درجة 25-): لتقليل اللمعان لرمز ضوء على خلفية داكنة الخلفية، فاستخدم درجة منخفضة.

تركيز عالٍ (مثل الدرجة 200): لتمييز رمز، عليك زيادة الدرجة الإيجابية .

محور `opsz`

وتتراوح الأحجام البصرية بين 20 بكسل مستقل الكثافة و48 بكسل مستقل الكثافة (dp).

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

الحصول على رموز Material

تتوفّر رموز Material Design بعدة تنسيقات وهي مناسبة لأنواع مختلفة من المشاريع والمنصات، سواء للمطوّرين في تطبيقاتهم أو للمصمّمين في نماذجهم أو نماذجهم الأولية.

الترخيص

تتوفر رموز المواد ضمن إصدار ترخيص Apache الإصدار 2.0 .

تصفُّح الرموز الفردية وتنزيلها

تتوفر المجموعة الكاملة من رموز المواد في رموز المواد المكتبة بتنسيق SVG أو PNG. وهي مناسبة للويب وAndroid وiOS أو مع أي أدوات مصمّم.

مستودع Git

يعمل git المستودع على المجموعة الكاملة من رموز المواد بتنسيق SVG.

$ git clone https://github.com/google/material-design-icons

استخدام رموز المواد

الاستخدام على الويب

يُعدّ خط Material Symbols أسهل طريقة لدمج رموز Material Design في مشاريع الويب.

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

خط ثابت باستخدام Google Fonts

إنّ أسهل طريقة لإعداد خطوط الرموز لاستخدامها في أي صفحة ويب هي من خلال Google Fonts. تضمين هذا سطر واحد من HTML:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />

يتضمن المقتطف أعلاه التهيئة الافتراضية لكل المحور ، مع الوزن إلى 400، بصري المقاس في 48 سنة، الدرجة في 0 ملء (أيضًا 0.)

استخدام CSS للخطوط API من أجل تكوين قيم محاور مختلفة. ألقِ نظرة على الأمثلة التالية:

خط متغيّر باستخدام Google Fonts

إذا كنت تضيف تأثيرات متحركة إلى الرموز من خلال CSS أو كنت تريد التحكّم بشكل أفضل في ميزات الرموز، استخدِم الخط المتغيّر Google Symbols. باستخدام النطاقات، بالتنسيق number..number، فيمكننا تحميل خط المتغير بأكمله. اطّلِع على معلومات دعم استخدام الخطوط المتغيّرة في Can I Use لمعرفة ما إذا كان بإمكان المستخدمين تحميل الخط المتغيّر، ومن المرجّح أنّه بإمكانهم ذلك. وإليك بعض الأمثلة:

أو حتى إضافة صور متحركة إليها

تحسين خط الرموز

يمكنك إنشاء مجموعة فرعية من الخط لتضمين الرموز ذات الصلة بتطبيقك فقط باستخدام مَعلمة طلب البحث &icon_names، باستخدام قائمة مفصولة بفواصل ومرتّبة أبجديًا لأسماء الرموز (الحروف المركبة).

إجراء لا يُنصَح به: استخدام الإعداد التلقائي الإعدادات تحميل كافة الرموز التي تزيد عن 3800 رمز. حمولة الخط: 295 كيلوبايت
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
```
مُقترَح: لتحديد أسماء الرموز لتحميل الرموز اللازمة فقط حمولة الخط: 1.7 كيلوبايت
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=block
```
أنشئ نُسخًا من محاور الخطوط المتغيّرة لتضمين المحاور التي سيستخدمها تطبيقك فقط. تحتاج معظم التطبيقات إلى عدة أشكال مختلفة من المحاور.

إجراء غير مقترَح: يؤدي عدم ضبط المحاور إلى تحميل خط ثابت تلقائي (الوزن 400، الحجم البصري 24، الجولة 50، الدرجة 0، التعبئة 0). عادة ما يكون تضمين جميع محاور الخطوط المتغيرة بالكامل غير ضروري ويؤدي إلى زيادة حمولة البيانات. حمولة الخط: 7.9 ميغابايت
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100
```
إجراء مقترَح: يتم استخدام مجموعة محدّدة من المحاور. على سبيل المثال، يقدّم محور "FILL" المتكامل انتقالات CSS بين الحالات، و"ROND" 100 هو التصميم المختار. حمولة الخط: 2.6 كيلوبايت
```
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
```

الاستضافة الذاتية للخط

استضافة الرمز الخط في موقع تتحكم فيه، لتحديد وقت تحديث مادة العرض. بالنسبة مثال: إذا كان عنوان 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 لتمثيل رمز، بدلاً من . بالنسبة إلى الرموز الأخرى، استخدِم طريقة الكتابة بترتيب أبجدي لاسم الرمز (أي استبدِل المسافات بشرطات سفلية).

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

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

يمكنك العثور على أسماء الرموز ونقاط الترميز في مكتبة رموزالمادة عن طريق اختيار أي رمز وفتح لوحة خط الرموز. يحتوي كل خط رموز رسومية على فهرس رموزه في مستودعgit Google Fonts الذي يعرض المجموعة الكاملة من الأسماء ورموز الأحرف.

تغيير نمط الأيقونات في Material Design

تم تصميم هذه الرموز لاتباع نظام Material Design والإرشادات وهي تظهر بشكل أفضل عند استخدام أحجام الرموز والألوان الموصى بها. تسهِّل الأنماط التالية تطبيق الأحجام والألوان وحالات النشاط المقترَحة.

الاستخدام في Android

في مكتبة رموز المواد، تكون جميع الأيقونات بتنسيق Vector Drawable. إلى للحصول على مزيد من المعلومات، يمكنك الاطّلاع على Android Vector Asset Studio ذات الصلة.

الاستخدام في iOS

تتوفر الرموز أيضًا بتنسيق Apple Symbols. لمعرفة المزيد عنها، تحقق من رموز Apple الرسمية نظرة عامة أو الاستخدام الإرشادات.

الاستخدام في Flutter

من المخطّط أن يتوفّر دعم Flutter لـ Material Symbols. ننصحك بمتابعتنا لمعرفة آخر الأخبار.