Materyal Semboller nedir?
En yeni simgelerimiz olan Malzeme Sembolleri, 2.500'den fazla glifi tek bir Çok çeşitli tasarım varyantlarına sahip tek yazı tipi dosyası. Sembollerin kullanılabildiği diller: üç stil ve dört ayarlanabilir yazı tipi ekseni (dolgu, ağırlık, eğim ve optik boyut). Malzeme Sembollerinin tamamını Malzeme Sembolleri'nde görebilirsiniz Kitaplık.
FILL ekseni
Dolgu, varsayılan simge stilini değiştirmenize olanak tanır. Tek bir simge, hem doldurulmamış hem de doldurulmuş durumları oluşturma.
Bir durum geçişini iletmek için animasyon veya etkileşim için dolgu eksenini kullanın. Varsayılan değer 0, tamamen dolu değer ise 1'dir. Dolgu, ağırlık ekseniyle birlikte simgenin görünümünü de etkiler.
wght eksen
Ağırlık, sembolün fırça ağırlığını tanımlar ve ince (100) ve kalın (700). Kalınlık, sembolün genel boyutunu da etkileyebilir.
GRAD ekseni
Ağırlık ve eğim, bir simgenin kalınlığını etkiler. Nottaki düzenlemeler, ağırlıktaki düzenlemelerden daha ayrıntılıdır ve sembolün boyutu üzerinde küçük bir etkiye sahiptir.
Sınıf, bazı metin yazı tiplerinde de kullanılabilir. Uyumlu bir görsel efekt için metin ve simgeler arasındaki not düzeylerini eşleştirebilirsiniz. Örneğin, metin yazı tipinin not değeri -25 ise simgeler bunu uygun bir değerle (ör. -25) eşleştirebilir.
Notu farklı ihtiyaçlar için kullanabilirsiniz:
Düşük vurgu (ör. -25 derece): Koyu arka plandaki açık renkli bir simgenin parıltısını azaltmak için düşük bir derece kullanın.
Yüksek vurgu (ör. 200 derece): Bir sembolü vurgulamak için pozitif değeri artırın not.
opsz ekseni
Optik boyutlar 20 dp ile 48 dp arasında değişir.
Resmin farklı boyutlarda aynı görünmesi için fırça ağırlığı (kalınlık) simge boyutu büyüdükçe değişir. Optik boyut, simge boyutunu artırdığınızda veya azalttığınızda çizgi kalınlığını otomatik olarak ayarlamanızı sağlar.
Materyal Sembolleri Alma
Materyal Sembolleri çeşitli biçimlerde mevcuttur ve farklı kullanım alanları için uygundur: geliştiriciler için hem kendi uygulamalarındaki hem de tasarımcılarla çalışmaya başlar.
Lisanslama
Materyal Simgelerinin kullanım hakkı Apache Lisansı 2.0 Sürümüne tabidir.
Simgelere tek tek göz atma ve indirme
Tüm Materyal Simgelerini, Materyal Simge Kitaplığı'ndan SVG veya PNG biçimlerinde indirebilirsiniz. Web, Android ve iOS için veya araçları hakkında bilgi edinin.
Git kod deposu
Git deposu, tüm Material Symbols'i SVG biçiminde içerir.
$ git clone https://github.com/google/material-design-icons
Materyal simgelerini kullanma
Web'de kullanma
Materyal Simgeler yazı tipi, Materyal Simgelerin web projelerine dahil edilmesinin en kolay yoludur.
Simgeler, web geliştiricilerin yalnızca birkaç satır kodla bu simgeleri kolayca kullanabilmesi için tek bir yazı tipinde paketlenir.
Google Fonts ile statik yazı tipi
Herhangi bir web sayfasında kullanmak üzere simge yazı tiplerini ayarlamanın en kolay yolu Google Yazı Tipleri. Aşağıdaki tek satırlık HTML'yi ekleyin:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
Yukarıdaki snippet, her eksen için varsayılan yapılandırmayı içerir. Ağırlık 400, optik boyut 48, seviye 0 ve dolgu (ayrıca 0) olarak ayarlanmıştır.
Daha fazla bilgi için Yazı Tipleri CSS'si API'yi farklı eksen değerleri yapılandırabilirsiniz. Aşağıdaki örneklere göz atın:
Google Fonts ile değişken yazı tipi
Simgeleri CSS aracılığıyla animasyon haline getiriyorsanız veya simge özellikleri üzerinde daha hassas kontrol sahibi olmak istiyorsanız
Google Simgeler değişken yazı tipi. number..number biçiminde aralıklar kullanarak değişken yazı tipinin tamamını yükleyebiliriz. 'n Değişken Yazı Tiplerini Kullanabilir miyim?
destek
kullanıcılarınızın değişken yazı tipini yükleyip yükleyemeyeceğini anlamak için
görmelerini sağlamalısınız. Aşağıda bazı örnekler verilmiştir:
Hatta animasyonlu hale getirebilirsiniz.
Simge yazı tipini optimize etme
Yazı tipini, yalnızca uygulamanızla ilgili simgeleri içerecek şekilde değiştirin alfabetik olarak sıralanmış
&icon_namessorgu parametresinden simge adlarının virgülle ayrılmış listesi (bağ işaretleri.)Önerilmez: Varsayılan ayarlar kullanıldığında 3.800'den fazla simge yüklenir. Yazı tipi yükü: 295 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+OutlinedÖnerilir: Simge adları belirtme tuşuna basarak yalnızca gerekli simgeleri yükleyebilirsiniz. Yazı tipi yükü: 1,7 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=blockDeğişken yazı tipi eksenlerini yalnızca uygulamanızın kullanacağı eksenleri içerecek şekilde örnekleyin. Çoğu uygulama için eksenlerin yalnızca birkaç varyasyonuna ihtiyaç vardır.
Önerilmez: Eksen yapılandırması eksikse varsayılan statik yazı tipi yüklenir (ağırlık 400, optik boyut 24, yuvarlama 50, sınıf 0, dolgu 0). Tüm değişken yazı tipi eksenlerini tam olarak dahil etmek genellikle gereksizdir ve yük. Yazı tipi yükü: 7,9 MB
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Önerilen: Belirli bir eksen kombinasyonu kullanılır. Örnek olarak, tam 'FILL' eksen, durumlar arasında CSS geçişleri sağlar ve "ROND" (ROND) 100 değeri seçilir. tasarım. Yazı tipi yükü: 2,6 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
Yazı tipini kendi kendine barındırma
simgesini barındırın
yazı tipi
kontrol ettiğiniz bir konumda gösterilmesi gerekir. Örneğin, URL https://example.com/material-symbols.woff ise aşağıdaki CSS kuralını ekleyin:
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
src: url(https://example.com/material-symbols.woff) format('woff');
}
Yazı tipini doğru şekilde oluşturmak için simgenin oluşturulmasına ilişkin CSS kurallarını belirtin. Bu kurallar genellikle Google Fonts API stil sayfasının bir parçası olarak yayınlanır ancak kendi kendinize barındırma işleminde projenize manuel olarak eklenmeleri gerekir:
.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'de simgeleri kullanma
Yukarıda verilen örneklerde
bağ işaretleri
'i kullanabilirsiniz. Web tarayıcısı, metin ligaturunu otomatik olarak simge vektörüyle değiştirir ve eşdeğer sayısal karakter referansından daha okunaklı bir kod sağlar. Örneğin,
Örneğin, HTML'nizde bir simgeyi temsil eden arrow_forward olacak.
() içeriyor. Diğer simgeler için simge adının yılan büyük/küçük harf düzenini kullanın
(boşlukların yerine alt çizgi kullanın).
Bu özellik, çoğu modern tarayıcıda hem masaüstü hem de mobil cihazlarda desteklenir cihazlar. Kullanıcılarınızın ligatürleri işleyip işleyemeyeceğini öğrenmek için Can I Use's ligatures support sayfasına bakın. Büyük olasılıkla işleyebilirler.
Bağlayıcıları desteklemeyen tarayıcıları desteklemeniz gerekiyorsa örnekteki gibi sayısal karakter referansları (diğer adıyla kod noktaları) kullanan simgeler aşağıda bulabilirsiniz:
Herhangi bir simgeyi seçip simge yazı tipi panelini açarak Materyal Simgeler Kitaplığı'nda hem simge adlarını hem de kod noktalarını bulabilirsiniz. Her simge yazı tipinin bir Google Fonts gitindeki kod noktaları dizini veri deposu gösterilmektedir.
Materyal Tasarım'da simgelerin stilini belirleme
Bu simgeler, Material Design kurallarına uygun olacak şekilde tasarlanmıştır ve önerilen simge boyutları ve renkleri kullanıldığında en iyi şekilde görünür. Stiller aşağıdaki önerileri uygulayarak beden, renk ve etkinlik durumlarımızı kolayca uygulayabilirsiniz.
Android'de kullanma
Materyal Simgeler Kitaplığı'ndaki tüm simgeler Vektör Resmi biçimindedir. Daha fazla bilgi için Android Vector Asset Studio dokümanlarına göz atın.
iOS'te kullan
Simgeler Apple sembolleri biçiminde de kullanılabilir. Bu araçlar hakkında daha fazla bilgi edinmek için resmi Apple Simgeleri'ne göz atın genel bakış ve kullanım inceleyin.
Flutter'da kullan
Material Symbols için Flutter desteği planlanmaktadır. Gelişmeler için bizi takip edin.