CSS @ font-face - “src: local ('☺')” ne anlama geliyor?

Ben kullanıyorum @font-faceilk kez ve fontsquirrel bir yazı-kit indirilen

CSS'ime eklemeyi tavsiye ettikleri kod:

@font-face {
    font-family: 'junctionregularRegular';
    src: url('Junction-webfont.eot');
    src: local('☺'), 
        url('Junction-webfont.woff') format('woff'), 
        url('Junction-webfont.ttf') format('truetype'), 
        url('Junction-webfont.svg#webfontoNEpZXy2') format('svg');
}

Şimdi, gülen yüz olayı beni çok üzdü. Ancak src'deki url sayısı da - neden bu kadar çok dosya öneriyorlar ve bir sayfa oluşturulduğunda hepsi tarayıcıya gönderilecek mi? .Ttf dışındaki her şeyin kaldırılmasında herhangi bir zarar var mı?

font-squirrel'in font-face oluşturucusundaki notları okursanız, bunun paul irish tarafından bir gotcha olduğunu görürsünüz.

İşte blog yazısından alıntı :

Ve .. @font-facesözdizimiyle ilgili

Şimdi orijinal kurşun geçirmez sözdizimine göre kurşun geçirmez gülen varyasyonu öneriyorum.

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('☺'),
       url('GraublauWeb.woff') format('woff'), url('GraublauWeb.ttf') format('truetype');
}

Kurşun geçirmez postadan:

Evet, gülen bir yüz. OpenType spesifikasyonu, iki baytlık unicode karakterlerin Mac'te bir font adında hiç çalışmadığını gösterir, böylece birisinin böyle bir ada sahip bir font yayınlama olasılığını azaltır.

Gülüşün daha iyi bir çözüm olmasının birkaç nedeni vardır:

• Webkit + Font Management yazılımı, glifleri A bloklarına dönüştürmek gibi yerel referansları bozabilir.

• OS X'te, Font Yönetimi yazılımı Kütüphane / Yazı Tipleri dışında erişilebilen bir yerel () yazı tipine erişmeye çalışırken bir iletişim kutusu göstermek için sistem ayarlarını değiştirebilir. Kurşun geçirmez yazımda daha fazla ayrıntı. Font Explorer X'in Firefox'taki diğer şeyleri karıştırdığı da biliniyor.

• Olası olmasa da, düşündüğünüzden tamamen farklı bir yerel () yazı tipine başvurabilirsiniz. (Farklı yazı tiplerinde tipik yazı, aynı ad) En azından bir risktir ve türün kontrolünü hem tarayıcıya hem de ana makineye yüklüyorsunuz. Bu risk, yazı tipinin indirilmesinden kaçınmanın yararına olmayabilir.

Bunların hepsi oldukça önemli vaka sorunları, ancak dikkate değer.

Yerel (☺︎), IE6-8'in kullanamayacağı yazı tiplerini indirmesini engellemek için kullanılan bir css hackidir (yalnızca EOT biçimindeki yazı tiplerini kullanabilir).

Açıklandı: Son src özelliği CSS basamaklamasında önceliklidir, yani CSS aşağıdan yukarıya ayrıştırılacaktır. Yerel (☺︎), IE'nin kullanamayacağı yazı tiplerini indiren bant genişliğini boşa harcamadan altta src'yi atlamasını ve daha sonra kullanacağı .eotformatta (sorunuzun üstündeki satırda tanımlanan) doğrudan yazı tipine gitmesini sağlar . Gülen yüz, bu ada sahip yerel bir yazı tipi (karakter kombinasyonu) olmayacağından emin olmak içindir.

Daha fazla bilgiyi buradan edinebilirsiniz: http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

@ font-face CSS basamaklamasında son src özelliği öncelik taşır, yani CSS aşağıdan yukarıya ayrıştırılır.