2015-03-23 10 views
6

yazı tipleri için dosya biçimleri arasında herhangi hakiki farkı:I (dosya boyutu ile) aşağıdaki biçimlerde özel bir yazı tipini var

font.eot (66kb)

font.svg (204KB)

font.afm (79KB)

font.otf (107KB)

font.woff (42kb)

font.pfb (130KB)

font.ttf (66kb)

Yani aynı yazı biçimine bağlı olarak tamamen farklı dosya boyutu vardır. .woff, boyut olarak en küçüktür.

w3school sayfasındaki @font-face sayfasına göre, EOT IE6 + üzerinde çalışır, diğer formatlar IE9 + üzerinde çalışır - bunun yanında, bu biçimler arasındaki farklar hakkında hiçbir bilgi bulamıyorum.

Sorum şu ki, hangi formatı seçerek kalite veya uyumluluk açısından fark yaratıyor?

+0

Kalitesi hakkında emin değilim, ancak uyumluluk açısından, '.EOT' IE için kullanılır <= 8 ve' .SVG', iOS Safari 3.2-4.1 için kullanılır. İşte iyi bir [referans] (http://www.sitepoint.com/how-to-use-cross-browser-web-fonts-part-1/). –

+0

@HashemQolami İlginç, yani SVG, IE'nin yanı sıra her şey için en güvenli bahistir? –

+0

Eh, aslında değil. Firefox'ta SVG yazı tipi kullanılmaz. Bakın: https://bugzilla.mozilla.org/show_bug.cgi?id=119490 –

cevap

7

Kesinlikle evet. İşte sorduğun kesin soru hakkında harika bir makale. Woff (woff):

http://www.smashingmagazine.com/2011/03/02/the-font-face-rule-revisited-and-useful-tricks/

listelemek vermedi ve dosya boyutu (en küçük) ve tarayıcı uyumluluğu açısından en çok tavsiye edilen biçimidir başka bir yazı tipi türü yoktur.

IE 8'i ve daha fazlasını hedefliyorsanız, WOFF ile birlikte bir şeyler kullanmanız gerekecektir. İşte bir örnek hedefliyor eski tarayıcılar:

@font-face { 
    font-family: Graublauweb; 
    src: url('Graublauweb.eot'); /* IE9 Compatibility Modes */ 
    src: url('Graublauweb.eot?') format('eot'), /* IE6-IE8 */ 
    url('Graublauweb.woff') format('woff'), /* Modern Browsers */ 
    url('Graublauweb.ttf') format('truetype'), /* Safari, Android, iOS */ 
    url('Graublauweb.svg#svgGraublauweb') format('svg'); /* Legacy iOS */ 
} 

Ve sıkıştırma oranları% 30 yakın olacak şekilde tamamen "henüz" tarayıcı benimsenmesi oranları açısından, gelecekteki woff 2.0 olacak değil iken -% 50 oranla woff. http://www.w3schools.com/css/css3_fonts.asp

TrueType yazı tipleri (TTF)

TrueType Apple ve Microsoft tarafından, 1980'lerin sonlarında geliştirilen bir yazı standarttır: Burada

farklı yazı tipi biçimlerini açıklar başka kaynaktır. TrueType, hem Mac OS hem de Microsoft Windows işletim sistemleri için en yaygın font formatıdır.

OpenType yazı tipleri (OTF)

OpenType ölçeklenebilir bilgisayar yazı tipleri için bir biçimdir. TrueType üzerine kurulmuş ve Microsoft'un tescilli ticari markasıdır. OpenType fontları, günümüzde yaygın bilgisayar platformlarında yaygın olarak kullanılmaktadır.

woff (woff)

woff web sayfalarında kullanılmak üzere bir yazı biçimidir. 2009 yılında geliştirilmiştir ve şimdi bir W3C Tavsiyesidir. WOFF, esas olarak sıkıştırma ve ek meta veriler içeren OpenType veya TrueType'tır. Amaç, bir sunucudan bir istemciye bant genişliği kısıtlamaları olan bir ağ üzerinden yazı tipi dağıtımını desteklemektir.

woff (woff 2.0) woff 1.0 daha iyi sıkıştırma sağlar

TrueType/OpenType yazı tipi.

SVG Yazı/Şekilleri

SVG yazı tipleri metni görüntülerken SVG glif olarak kullanılmasına izin verir. SVG 1.1 belirtimi, bir SVG belgesi içinde yazı tiplerinin oluşturulmasını sağlayan bir yazı tipi modülü tanımlar. Ayrıca SVG belgelerine CSS uygulayabilir ve SVG belgelerindeki yazıya @ font-yüz kuralı uygulanabilir.

Gömülü OpenType yazı tipleri (EOT)

EOT yazı web sayfalarında gömülü yazı olarak kullanılmak üzere Microsoft tarafından tasarlanan OpenType fontların kompakt biçimidir.

+0

Oh evet, eklemeyi unuttum. Ve doğrudur, en küçük, güncelleştirilmiş sorudur. –

+1

Sadece merak ediyorum, bu kod parçası tam olarak nasıl çalışıyor? Gördüğüm tek şey farklı formatların bir listesi, bu yüzden sadece kendilerini geçersiz kılmıyorlar ve sonuncusu "aktif" olanı değil mi? CSS genel olarak nasıl çalışır? –

+1

@HenrikPetterson 'src' tanımlayıcısı, virgülle ayrılmış fontların URL'lerinin/formatlarının listesini kabul eder,'. UA'lar (web tarayıcıları) listeden ilk erişilebilir/kabul edilebilir URL/biçimini seçmelidir. [Spec] (http://dev.w3.org/csswg/css-fonts-3/#src-desc) aşağıdakileri belirtir: 'Bir font gerektiğinde, kullanıcı aracı listelenen referanslar dizisini tekrarlar. biri başarıyla aktif olabilir. Geçersiz veriler veya bulunmayan yerel yazı tipi yüzleri içeren yazı tipleri yok sayılır ve kullanıcı aracısı listede bir sonraki yazı tipini yükler. ' –

İlgili konular