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). Materyal Sembollerin tamamını görmek için Malzeme Sembolleri Kitaplığı.
FILL eksen
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 aktarmak için animasyon veya etkileşim için dolgu eksenini kullanın. Değerler, varsayılan için 0 veya tamamen doldurulmuş için 1'dir. Ağırlığıyla birlikte ekseninde, dolgu, 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). Ağırlık, botun genel boyutunu da etkileyebilir. anlamına gelir.
GRAD eksen
Ağırlık ve eğim, bir simgenin kalınlığını etkiler. Notla ilgili ayarlamalar: ayarlamalara kıyasla daha ayrıntılıdır ve cihaz boyutu üzerinde küçük bir anlamına gelir.
Not, bazı metin yazı tiplerinde de kullanılabilir. Şu tarihler arasında sınıf seviyelerini eşleştirebilirsiniz: metin ve semboller kullanarak uyumlu bir görsel efekt oluşturun. Örneğin, metin yazı tipi not değeri -25 ise, semboller uygun bir değerle eşleştirilebilir (örneğin, -25).
Farklı ihtiyaçlar için derecelendirmeyi kullanabilirsiniz:
Az vurgu (ör. -25 derece): Koyu bir zeminde açık simgenin parlamayı azaltmak için düşük bir not kullanın.
Yüksek vurgu (ör. 200 derece): Bir simgeyi vurgulamak için pozitif değeri artırın not.
opsz eksen
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, otomatik olarak simge boyutunu artırdığınızda veya azalttığınızda fırça kalınlığını ayarlayın.
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 veya prototiplerinde yer almasını sağlar.
Lisanslama
Malzeme Simgeleri Apache Lisansı Sürüm 2.0.
Simgelere tek tek göz atma ve simgeleri indirme
Tüm Malzeme Sembolleri seti şuradan edinebilirsiniz: Malzeme Sembolleri Kitaplığı SVG veya PNG biçimlerinde kullanabilirsiniz. Web, Android ve iOS için veya araçları hakkında bilgi edinin.
Git kod deposu
İlgili içeriği oluşturmak için kullanılan git deposu SVG biçimindeki tüm Malzeme Simgeleri grubunu içerir.
$ git clone https://github.com/google/material-design-icons
Materyal Sembolleri Kullanma
Web'de kullan
Malzeme Sembolleri yazı tipi, Malzeme Simgeleri’ni eklemenin en kolay yoludur web projelerine dönüştürmenize yardımcı olur.
Simgeler, web geliştiricilerinin kolayca okuyabilmeleri için tek bir yazı tipindedir. bu simgeleri yalnızca birkaç satır kodla birlikte kullanın.
Google Fonts ile statik yazı tipi
Herhangi bir web sayfasında kullanmak üzere simge yazı tiplerini ayarlamanın en kolay yolu Google Fonts. Şu tek HTML satırını ekleyin:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
Yukarıdaki snippet, her bir tarayıcı için varsayılan yapılandırmayı eksen, şununla: ağırlık 400'de, optik boyut 48'de, not ver 0'da ve doldur (ayrıca 0.)
Şunu kullanın: Fonts CSS API farklı eksen değerleri yapılandırın. Aşağıdaki örneklere göz atın:
ziyaret edin.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çimindeki aralıkları kullanarak
değişken yazı tipinin tamamını yükleyebiliriz. Ödeme yap
Değişken yazı tipleri desteğini kullanabilir miyim?
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 animasyon bile yapabilirsiniz!
Yazı tipini kendi kendine barındırma
Web sitesinin
simge yazı tipi
kontrol ettiğiniz bir konumda gösterilmesi gerekir. Örneğin,
örnek, URL https://example.com/material-symbols.woff ise
şu CSS kuralını uygulayın:
@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 simgeyi oluşturmaya yönelik CSS kurallarını bildirin. Bu kuralları normalde Google Fonts API stil sayfasının bir parçası olarak sunulur, ancak barındırması durumunda projelerinize manuel olarak dahil edilmesi 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'deki simgeleri kullanma
Yukarıda verilen örneklerde
bağ işaretleri,
metinsel adı kullanılarak bir simge glifinin oluşturulmasına olanak tanır. İlgili içeriği oluşturmak için kullanılan
web tarayıcısı, metin bağını otomatik olarak simge vektörüyle değiştirir ve
eşdeğer sayısal karakter referansından daha okunabilir 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. Görüntüleyin Bağlayıcı desteğini kullanabilir miyim? görmek için kullanıcılarınızın ligatürleri işleyip desteklemediğini, büyük olasılıkla yapabilir.
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:
Hem simge adlarını hem de kod noktalarını Malzeme Sembolleri Kitaplığı simgesini seçin ve simge yazı tipi panelini açın. Her simge yazı tipinin bir Google Fonts'taki kod noktaları dizini git deposu gösterilmektedir.
Materyal Tasarım'da simgelerin stil özelliklerini ayarlama
Bu simgeler şuna uygun olacak şekilde tasarlanmıştır: Materyal Tasarım yönergelerine Ayrıca, önerilen boyut ve renklerde en iyi performansı gösterirler. Stiller aşağıdaki önerileri uygulayarak beden, renk ve etkinlik durumlarımızı kolayca uygulayabilirsiniz.
Android'de kullan
Materyal Sembolleri Kitaplığı'ndaki tüm simgeler, Vektör Çekilebilir Çizim biçimindedir. Alıcı: daha fazla bilgi edinmek için Android Vector Asset Studio dokümanları.
iOS'te kullan
Simgeler Apple Simgeleri biçiminde de mevcuttur. Bu araçlar hakkında daha fazla bilgi edinmek için resmi Apple Simgeleri'ne göz atın genel bakış ve kullanım kılavuzu.
Flutter'da kullan
Materyal Semboller için Flutter desteği planlanmaktadır. Gelişmeler için bizi takip edin.