Web Fontları ile Daha İyi ve Daha Net UI Simgeleri İçin Bir Kılavuz

Bir web sitesindeki simgeleri görüntülemek için bitmap görüntü formatlarını (PNG ve GIF gibi) kullanmayı biliyorsanız, o zaman onun eksikliklerini de bilirsiniz. Öncelikle, simgenin boyutuna ve renk bilgisine bağlı olarak, bir simge dosyasının boyutu çok büyük olabilir.

Bir web sitesine koymak için çok fazla simgemiz varsa, tarayıcı tarafından birçok HTTP isteği yapılması gerektiğinden web sitesi performansını da yavaşlatır. Bu sorun CSS sprite ile çözülebilmesine rağmen, dosya boyutu hala büyük.

Bitmap simgesinin ayrıca esneklik ve ölçeklenebilirlikte eksiklikleri vardır; Diyelim ki simgeyi belirli bir seviyeye büyütmemiz veya büyütmemiz ya da retina ekranı gibi çok yüksek bir ekran çözünürlüğünde görüntülememiz gerekiyor; simge kesinlikle olacak bulanık görünümlü ortaya.

Yukarıdaki konulardan bazılarını dikkate alırsanız, muhtemelen simge yazı tiplerini kullanmanız gerekir..

Simge Yazı Tiplerini Kullanma

bir simge yazı tipi bir web fontunda paketlenmiş ve daha sonra bir web sitesine katıştırılabilen bir simge setidir. @ Font-face. CSS numarasındaki Chris'in işaret ettiği gibi, simgelerin sunulması için resim üzerinde yazı tipi kullanmanın birçok faydası vardır;

• Font, doğası gereği çözünürlükten bağımsız olan vektör tabanlı bir nesnedir, bu nedenle simge, çok yüksek ekran çözünürlükleri (retina seviyesi gibi) dahil olmak üzere çeşitli ekran çözünürlüklerinde net kalacaktır..
• Aynı zamanda ölçeklenebilir, kaliteden ve hassasiyetten ödün vermeden birçok seviyede büyütülmesine izin veriyor.
• Simge temelde bir yazı tipi olduğundan, ayrıca rengi, saydamlığı, metin gölgesini kontrol edebilir ve hatta stil sayfasını yeniden boyutlandırabiliriz.
• Simgeyi CSS3 ile de canlandırabiliriz..
• Simgesi ile denir @ Font-face Internet Explorer 4'ten (.eot ile) daha erken bir zamanda desteklenen kural.
• Küçük HTTP isteği ve Daha düşük dosya boyutu.

İşte bulabileceğimiz en iyi ücretsiz simge fontlarından bazıları:

• Yazı tipi Başar
• IcoMoon
• Sosyal Medya Simgeleri
• Zurb Vakfı Simgeleri

Yazarın zamanını ve sıkı çalışmasını onurlandırmak için lisansı web sitenize yerleştirmeden önce kontrol ettiğinizden ve takip ettiğinizden emin olun..

@ font-face Kuralı

Bahsettiğimiz gibi, simgeler kullanarak @ Font-face yeni tanımlayan stil sayfası aracılığıyla kural font ailesi. Aşağıdaki örnekte Web Sembollerini kullanacağız;

 @ font-face font-ailesi: 'WebSymbolsRegular'; src: url ('yazı tipleri / websymbols-regular-webfont.eot'); src: url ('yazı tipleri / websymbols-regular-webfont.eot? #iefix') formatı ('gömülü-opentype') formatı, url ('yazı tipleri / websymbols-regular-webfont.woff') formatı ('yazı / websymbols-regular-webfont.woff') formatı ('woff'), url ('yazı tipleri / websymbols normal webfont.ttf') formatı ('truetype'), url ('yazı tipleri / websymbols-regular-webfont.svg # WebSymbolsRegular') formatı ('svg');  

Ardından, HTML belgesinde, simgeyi temsil eden karakterleri eklememiz gerekir; font ailesi Belgede yaygın olarak, simgenin oluşturulması gereken bazı öğelere fazladan bir sınıf ekleyerek daha fazlasını yapabiliriz;

 
 
h
 
ben
 
j
 
bir
 
ben
 
 

Stil sayfasına geri dönelim, yeni font ailesi az önce eklediğimiz o sınıf için:

 .icon-font font-family: WebSymbolsRegular; yazı tipi boyutu: 12pt;  

• @ Font-face gösterimi

Sahte elemanların kullanılması

Simge yan eleman olarak değerlendirilirse, simgeyi sözde eleman. HTML işaretlememizin şu şekilde olduğunu varsayalım:

 
 
cevap
 
Hepsini cevapla
 
ileri
 
Ek dosya
 
görüntü
 
 

Stil sayfasında şu şekilde yapabiliriz:

 ul.icon-font.pseudo li: önce font-family: WebSymbolsRegular; kenar boşluğu: 5 piksel;  ul.icon-font.pseudo li: nth-child (1): önce içerik: "h";  ul.icon-font.pseudo li: nth-child (2): önce içerik: "i";  ul.icon-font.pseudo li: nth-child (3): önce içerik: "j";  ul.icon-font.pseudo li: nth-child (4): önce içerik: "A";  ul.icon-font.pseudo li: nth-child (5): önce içerik: "I";  

• Demo Sözde eleman

Özel Kullanım Unicode

Simgelerin harflere (A, B, C, D, vb.) Gömülmediği, ancak karakterler arasında çarpışmayı en aza indirgemek için Unicode Özel Kullanım'da gömülü olduğu bir durum vardır. FontAwesome'daki gibi, yazar da buna benzer şekilde stil sayfasındaki tüm karakter kodlarını nihayet ekledi;

 .icon-glass: content: "\ f0c6" öncesi;  

Ancak, simgeyi doğrudan HTML’ye yerleştirmemiz gerektiğinde, aşağıdaki kod gibi bir şey \ f0c6 HTML'de kodlanmış geçerli bir karakter olmadığından sivri simgeyi oluşturmayacak.

HTML, sayısal bir referans işaretlemeye ihtiyaç duyar Özel karakterler oluşturmak için Bu konuyu CSS3 Düğmeleri ile ilgili önceki eğitmenimizde biraz ele aldık; Bu karakterin işareti ve işareti ile birlikte&), bir karma işareti (#) ve bir x daha sonra karakteri temsil eden onaltılık sayı izler..

Örneğin, f0c6 onaltılık bir sayı olduğundan, HTML’deki sayısal karakter başvurusu & # Xf0c6;, FontAwesome'da bu kod ataş simgesi, öyle;

• Demo Unicode

Yazı Tipi Alt Ayarı

Koleksiyondaki simgelerin tümü gerekli olmayabilir. Bu durumda, kullanılmayan karakterleri, aynı zamanda Düşük font dosyası boyutları ile sonuçlanır. Neyse ki, FontSquirrel'den bu işi kolayca yapmak için kullanışlı bir araç var, @ font-face generator.

O sayfaya gidip yazı tipini ekledikten sonra, Uzman. Daha fazla seçenek göreceksiniz; seçmek Özel Alt Ayarlama.

Bu örnekte, web sitemizde sosyal medya simgelerini görüntülemek için Sociolico fontunu kullanıyoruz, ancak ihtiyacımız olan simgeler sırasıyla bu karakterlerle temsil edilen sadece Dribble, Facebook ve Twitter; d, f ve t. Böylece, bu karakterleri Tek Karakterler giriş alanına aşağıdaki gibi koyun:

Ve biz bitti. Şimdi fontu indirebiliriz ve benim durumumda font boyutu sadece 3Kb ila 5Kb olarak ortaya çıktı. Ayrıca sadece karakterleri Bir simgeye işlenecek sadece d, f ve t, diğer karakterler yalnızca normal bir harf olacak.

Son düşünce

Bu uygulamada yapamayacağımız şeylerden biri de ikonuna bunun gibi son derece ayrıntılı efektler eklemek..

Ancak, genel tasarımımız bu seviyede detay gerektirmiyorsa, bu yaklaşım web sitelerinde ikonlara hizmet etmek için daha iyi bir yol olabilir. Esnekliği, ölçeklenebilirliği, çok küçük bir dosya boyutuyla retinaya hazır, başka ne isteyebiliriz?

Son olarak, bu konuya daha derine dalmak istiyorsanız, aşağıda birkaç yararlı referansı, indirilecek demo ve kaynak kodumuzu bir araya getirdik..

• Kendi Simge Webfont Nasıl Yapılır - WebDesignerDepot.com
• Yazı Tiplerini ve Veri Özelliklerini Görüntüleme - 24Way
• Özel Kullanım Unicode - Wikipedia

• gösteri
• Kaynak İndir