Muhtemelen simge yazı tiplerinin çok kolay ve kullanışlı olduğunu duymuşsunuzdur ve gerçekten hızlı bir şekilde bunları kullanabilirsiniz. Bu tasarım aracının kendi metodolojisini ve kullanımını test etmemize olanak sağlar.
Her şeyden önce Google deki arama sorgularına bir göz atabilirsiniz: Bu yazıda Coder bakış açısı açısından güçlü bir tasarımcı araçlarına göz atarak ve aynı zamanda simge yazı tiplerini kullanarak iyi temsil edilebilen artıları ve eksilerini sizlere göstermek istiyorum.
Web yazı simgelerinin kullanımının önemini tartışmaya gerek yok, oldukça dokunulmazdır bir konudur. Şimdi bitmapped simgeleri ve yazı simgeleri kullanmanın artıları ve eksileri ile başlayalım.
Bitmapped Simgeler
IE svg desteği 9 sürümünden itibaren başlamaktadır, 8'inci sürümü artık neredeyse bitti, vektör simgeleri hakkında konuşmayacağız!
Tasarımcının perspektifinden bakıldığında
- Hızlı arama: raster grafik ön izlemesi ek yazılım gerektirmez - oldukça uygun.
- Belge içerisinde hızlı uygulama: Sadece Photoshop veya Gimp belgelerinizin içerisine dsyayı sürükleyin - buda oldukça uygun.
- Ölçeklendirilmiş raster grafik kökü: simgeler kalite kaybına uğramadan artışı sağlanamaz – Bu Kötü.
HTML açısından bakıldığında - Coder
- PSD dışında bu simgeleri çekmek oldukça rahatsız. Ama her simge için sunucuya bir istek oluşturulabilir. Bu yükü azaltmak için bizim sprite oluşturmamız gerekiyor - tek bir görüntü için küçük grafik öğeleri yapıştırın.
- Raster simgeleri hareketlendirmeleri oldukça kolaydır, fakat görüntü kalitesi oldukça kötüdür.
- Ölçeklendirme sırasında mobil cihazların, bitmap simgelerin özellikle Retina ekranı üzerinde gerçekten çok iyi görünmektedir.
Simge Yazı Tipleri
Bu yazı her karakterin bir simgesidir. Web üzerinde aşağıdaki gibi kullanılır: CSS sınıfı (çeşitli biçimlere sahip diğer bağlı yazı tipleri gibi) simgelerin içeriği ile alakalı seçiciler ile kuralları ile eklemek gerekir, sayfanıza yazı tipi dosyalarını bağlamanız gerekmektedir:
1 |
icon-home |
, simgesine karşılık gelebilir “home”.
Daha sonra HTML yazmak gerekmektedir:
1 |
<span class="icon-home"> </ span> |
ve simge home olarak seçtiğiniz yerde görüntülenecektir. Hiç bir şekilde sözde sınıf yerine ekstra HTML öğelerini kullanmanıza engel olmaz.
Avantajları
- Siz hiç bir sorun olmadan bu simgeleri ölçeklendiebilir veya animasyonlar uygulayabilirsiniz. (simge yazı tipleri vektöreldir.)
- Sadece simgelerin büyük setleri kullanılabilir.
- Bu simgeler tüm ekranlarda harika bir görüntü sunacaktır.
- Simgeler kolaylıkla HTML sayfasına eklenebilir.
- CSS kullanılarak renkleri ve boyutları kolaylıkla değiştirilebilir.
- CSS3 ile kolay değişiklikler uygulanabilir gölge ve animasyonlar eklenebilir. (IE'nin eski sürümleri render değildir.)
Dezavantajları
- Simgelerin ön izlemesi için yazılımın bir web sayfası penceresinde görüntülenmesi gerekmektedir.
- Simgeler tek renk olarak gelmektedir.
- Grafik editörü bu simgeleri kullanabilmek için daha karmaşık bir yaklaşım izlemelidir.
- Optimizasyon olmadan yazı kullanılmayan simgeleri bir çok sayıda içermektedir. (çok büyük dosya boyutları.)
Şimdi bu simge yazı tiplerine yakından bir göz atalım. Ücretsiz bu tasarım güzelliklerini indirebilirsiniz kaynaklardan oluşan bir dizi bulacaksınız.
Bu kaynakların her biri farklı bir sizi sağlamaktadır, bu yüzden hepsini kullanmakta özgürsünüz. Projelerinize bağlı olarak ihtiyacınız olan simgeleri seçin ve download butonuna basın, simgeler farklı diziler ile gelecektir.
Hepsi bu kadar, Zaten bu yazı simgelerini ve bu kaynakları kullanıyorsanız bu konu hakkındaki düşüncelerinizi belirtebilirsiniz, yorum yapmak ücretsizdir.