این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

راهنمای نمادهای مواد

نمادهای مادی چیست؟

نمادهای متریال جدیدترین نمادهای ما هستند که بیش از 2500 گلیف را در یک فایل فونت با طیف گسترده ای از انواع طراحی ادغام می کنند. نمادها در سه سبک و چهار محور فونت متغیر قابل تنظیم (پر کردن، وزن، درجه و اندازه نوری) موجود هستند. مجموعه کامل نمادهای مواد را در کتابخانه نمادهای مواد مشاهده کنید.

محور `FILL`

Fill به شما این امکان را می دهد که سبک آیکون پیش فرض را تغییر دهید. یک نماد می‌تواند هم حالت پر نشده و هم حالت پر را ارائه دهد.

برای انتقال یک حالت، از محور fill برای انیمیشن یا تعامل استفاده کنید. مقادیر 0 برای پیش فرض یا 1 برای کاملاً پر شده است. همراه با محور وزن، پر نیز بر ظاهر نماد تأثیر می گذارد.

محور `wght`

وزن وزن ضربه ای نماد را با طیفی از وزن ها بین نازک (100) و پررنگ (700) مشخص می کند. وزن همچنین می تواند بر اندازه کلی نماد تأثیر بگذارد.

محور `GRAD`

تجسم محور درجه

وزن و درجه بر ضخامت نماد تأثیر می گذارد. تنظیمات درجه نسبت به تنظیم وزن دانه بندی بیشتری دارند و تأثیر کمی بر اندازه نماد دارند.

درجه نیز در برخی از فونت های متن موجود است. برای جلوه بصری هماهنگ می توانید سطوح درجه را بین متن و نمادها مطابقت دهید. به عنوان مثال، اگر فونت متن دارای مقدار درجه -25 باشد، نمادها می توانند آن را با یک مقدار مناسب، مثلا -25 مطابقت دهند.

برای نیازهای مختلف می توانید از درجه استفاده کنید:

تاکید کم (مثلاً درجه 25-): برای کاهش تابش نور برای یک نماد روشن در پس زمینه تیره، از درجه پایین استفاده کنید.

تاکید زیاد (مثلاً نمره 200): برای برجسته کردن یک نماد، نمره مثبت را افزایش دهید.

محور `opsz`

اندازه های نوری از 20dp تا 48dp می باشد.

برای اینکه تصویر در اندازه های مختلف یکسان به نظر برسد، وزن ضربه (ضخامت) با مقیاس اندازه نماد تغییر می کند. اندازه اپتیکال راهی برای تنظیم خودکار وزن ضربه هنگام افزایش یا کاهش اندازه نماد ارائه می دهد.

دریافت نمادهای مادی

نمادهای متریال در قالب‌های مختلفی موجود هستند و برای انواع مختلف پروژه‌ها و پلتفرم‌ها مناسب هستند، هم برای توسعه‌دهندگان در برنامه‌هایشان و هم برای طراحان در ماکت‌ها یا نمونه‌های اولیه.

صدور مجوز

نمادهای مواد تحت مجوز آپاچی نسخه 2.0 در دسترس هستند.

مرور و دانلود آیکون های فردی

مجموعه کامل نمادهای مواد از کتابخانه نمادهای مواد در قالب‌های SVG یا PNG در دسترس است. آنها برای وب، اندروید و iOS یا با هر ابزار طراح مناسب هستند.

مخزن Git

مخزن git شامل مجموعه کاملی از نمادهای مواد در قالب SVG است.

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

استفاده از نمادهای مادی

استفاده در وب

فونت Material Symbols ساده ترین راه برای گنجاندن Material Symbols در پروژه های وب است.

آیکون ها در یک فونت بسته بندی می شوند تا توسعه دهندگان وب به راحتی بتوانند این نمادها را تنها با چند خط کد ترکیب کنند.

فونت استاتیک با فونت گوگل

ساده ترین راه برای تنظیم فونت های نماد برای استفاده در هر صفحه وب، از طریق فونت های گوگل است. این خط تکی از HTML را وارد کنید:

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

قطعه بالا شامل پیکربندی پیش‌فرض برای هر محور ، با وزن 400، اندازه نوری در 48، درجه 0 و fill (همچنین 0) است.

از Fonts CSS API برای پیکربندی مقادیر محورهای مختلف استفاده کنید. به نمونه های زیر دقت کنید:

فونت متغیر با فونت گوگل

اگر می‌خواهید نمادها را از طریق CSS متحرک کنید، یا می‌خواهید کنترل دقیق‌تری روی ویژگی‌های نماد داشته باشید، از فونت متغیر Google Symbols استفاده کنید. با استفاده از محدوده ها، در قالب number..number ، می توانیم کل فونت متغیر را بارگذاری کنیم. پشتیبانی Can I Use's Variable Fonts را بررسی کنید تا متوجه شوید که آیا کاربران شما قادر به بارگیری فونت متغیر هستند، به احتمال زیاد. در اینجا چند نمونه آورده شده است:

یا حتی آنها را متحرک کنید!

فونت آیکون را بهینه کنید

فونت را طوری زیر مجموعه قرار دهید که فقط نمادهای مربوط به برنامه شما را با استفاده از پارامتر پرس و جو &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 به جای  . برای نمادهای دیگر، از حروف مار نام نماد استفاده کنید (یعنی جاهای خالی را با زیرخط جایگزین کنید).

این ویژگی در اکثر مرورگرهای مدرن در دستگاه های دسکتاپ و موبایل پشتیبانی می شود. به پشتیبانی لیگاتورهای Can I Use مراجعه کنید تا ببینید آیا کاربران شما قادر به پردازش لیگاتورها هستند یا خیر، به احتمال زیاد آنها می توانند.

اگر نیاز به پشتیبانی از مرورگرهایی دارید که از لیگاتور پشتیبانی نمی‌کنند، نمادها را با استفاده از ارجاعات نویسه‌های عددی (معروف به نقاط کد) مانند مثال زیر مشخص کنید:

با انتخاب هر نماد و باز کردن پانل فونت آیکون، نام نمادها و نقاط کد را در کتابخانه نمادهای مواد پیدا کنید. هر فونت نماد دارای یک فهرست کد در مخزن گیت فونت گوگل است که مجموعه کاملی از نام ها و کدهای کاراکتر را نشان می دهد.

نمادهای استایل در طراحی متریال

این نمادها برای پیروی از دستورالعمل‌های طراحی متریال طراحی شده‌اند و هنگام استفاده از اندازه‌ها و رنگ‌های توصیه‌شده نماد، بهترین ظاهر را دارند. سبک‌های زیر اعمال اندازه‌ها، رنگ‌ها و وضعیت‌های فعالیت پیشنهادی ما را آسان می‌کنند.

در اندروید استفاده کنید

در کتابخانه نمادهای مواد، همه نمادها با فرمت Vector Drawable هستند. برای کسب اطلاعات بیشتر، مستندات Android Vector Asset Studio را بررسی کنید.

در iOS استفاده کنید

آیکون ها در قالب Apple Symbols نیز موجود هستند. برای کسب اطلاعات بیشتر در مورد آنها، نمای کلی و راهنمای استفاده از نمادهای اپل را بررسی کنید.

استفاده در فلاتر

پشتیبانی فلوتر برای Material Symbols برنامه ریزی شده است. منتظر بروزرسانی ها باشید.