Simge Yazı Tipleri: Nasıl çalışırlar?

Simge yazı tiplerinin yalnızca yazı tipi olduğunu ve simgeleri yalnızca sınıf adlarını çağırarak alabileceğinizi anlıyorum, ancak simge yazı tipleri nasıl çalışır?

Simge yazı tiplerinin simgeleri nasıl görüntülediğini (genel yazı tiplerine kıyasla) görmek için Chrome'da yüklenen ilgili simge yazı tipi kaynaklarını kontrol etmeyi denedim, ancak bunun nasıl olduğunu çözemedim.

Çok sayıda simge yazı tipi olmasına rağmen, bu "simge yazı tipi tekniğinin" nasıl yapıldığına dair kaynakları bulmada da başarısız oldum . Simge yazı tiplerinin nasıl entegre edilebileceğini gösteren bir sürü kaynak da var , ancak kimse bunun nasıl yapıldığını paylaşmıyor veya yazıyor gibi görünüyor !

Glyphicons olan görüntüleri ve değil bir yazı tipi. Tüm simgeler bir hareketli görüntü içinde bulunur (ayrı görüntüler olarak da mevcuttur) ve öğelere konumlandırılmış olarak eklenirler backround-image:

Gerçek yazı simgeleri ( FontAwesome , örneğin) do belirli yazı tipi ve make kullanımını indirirken dahil contentörneğin mülkiyet,:

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

Gibi contentözellik desteklenmiyor eski tarayıcılarda bu da faydalanmak görüntüleri .

Yazı tipi olarak kullanılan tamamen ham FontAwesome örneğini burada bulabilirsiniz ( - bunu göremeyebilirsiniz!) Ambulansa çevirin: http://jsfiddle.net/GWqcF/2

Sorunuz, bir CSS sınıfının belirli bir karakteri nasıl ekleyebileceğiyse (bu, özel yazı tipinde bir simge olarak görüntülenecektir), FontAwesome için kaynağa bir göz atın :

.icon-glass:before { content: "\f000"; }
.icon-music:before { content: "\f001"; }
.icon-search:before { content: "\f002"; }
.icon-envelope:before { content: "\f003"; }
.icon-heart:before { content: "\f004"; }

Bu nedenle, karakteri eklemek için bir CSS içerik yönergesi kullanılır (bu, diğer okuyucuları karıştırmayan özel bir özel kullanım için ayrılmış Unicode alanından).

Web yazı tipi simgeleri nasıl çalışır?

Web yazı tipi simgeleri, içerik özelliğini kullanarak HTML'ye belirli bir glif eklemek için CSS kullanarak çalışır. Daha sonra @font-face, enjekte edilen glifi biçimlendiren bir dingbat web yazı tipi yüklemek için kullanır . Sonuç, enjekte edilen glifin istenen simge haline gelmesidir.

Başlamak için, gerek belirli ASCIIkarakterler için tanımlanmış (A, B, C, !, @, #, etc.)gerekse Unicode yazı tipinin Özel Kullanım Alanında, belirli karakterler tarafından kullanılmayacak yazı tipinde boşluklar olan, ihtiyacınız olan simgeleri içeren bir web yazı tipi dosyasına ihtiyacınız olacaktır. Unicode kodlu yazı tipi.

Duyarlı Web Yazı Tipi Simgelerinde web yazı tipi simgesinin nasıl oluşturulacağı hakkında daha fazla bilgi edinin .