2015-06-01 20 views
14

Web sitem için bir font kullanmak istiyorum, genel araştırmayı aldım ve yazı tipleri için çeşitli formatlar buldum, Şimdi standart formatın ne olduğunu bilmek istiyorum? Veya standart biçimleri nelerdir?Sitemde hangi font formatını kullanmalıyım

.TTF (True Type Font) 
.EOT (Embedded OpenType) 
.OTF (open type font) 
.SVG (Scalable Vector Graphics) 
.WOFF (Web Open Font Format) 

Şimdiye kadar, ben tüm bu formatları, böyle bir şey kullandım:

@font-face { 
    font-family: 'Font'; 
    src: url('Font.eot'); /* IE9 Compat Modes */ 
    src: url('Font.eot?#') format('eot'), /* IE6–8 */ 
     url('Font.ttf') format('truetype'), /* Saf3—5, Chrome4+, FF3.5, Opera 10+ */ 
     url('Font.woff') format('woff'), /* FF3.6+, IE9, Chrome6+, Saf5.1+*/ 
     url('Font.otf') format('opentype'), 
     url('Font.svg') format('svg'); 
} 

Ancak bu durumda

site çok ağır (bütün biçimleri boyutu neredeyse 1MB), Peki ben daha optimize edilmesi için ne yapmalıdır? onlar OpenType (OTF) tarafından kullanılan yapı ve TrueType sıkıştırılmış sürümü kullandığından

+2

Eğer – priya786

+1

Web programlama dikkate ve bulunabilir her alternatifi uygulama hakkında değil keşfetmek tüm diğer tarayıcılar için Ttf kullanmak ve internet için .eot edebilirsiniz. Hedefinize konsantre olun: ilgili tarayıcıları desteklemek için. IE6-9 gibi şeyler kesinlikle göz ardı edilebilir. _one_ formatını, woff veya ttf'yi kullanın ve işte bu kadar. Buna uymayan tarayıcılar desteklemeye değmez. – arkascha

+0

@ priya786 sadece .ttf ve .eot? –

cevap

5

anlama Yazı Dosya Türleri

  • woff/woff2

woff genellikle diğer biçimlere göre daha hızlı yüklenmesini fontları (TTF) yazı tipleri.

  • SVG/SVGZ Mobil kullanım için

İdeal

  • EOT

  • OTF/TTF
  • IE tarafından desteklenen tek

bu biçimler kolayca (ve yasadışı) DİĞER TARAFTA

  • kopyalanabilir çünkü woff formatı başlangıçta kısmen OTF ve TTF, bir tepki olarak yaratıldı:

Google Yazı Tipleri bunu yazı tiplerini kullanmanın bir yolu olarak sunar.

  • BAZI PERFORMANS İPUÇLARI

İzle dosya

Yazı şaşırtıcı ağır olabilir

boyutu, daha hafif versiyonlarını sunuyoruz seçeneklerin doğru öylesine yalın. Örneğin, 400KB ağırlığında biri karşı 50KB bir yazı seti lehine. karakter kümesi sınırlama , mümkünse

gerçekten bir yazı tipi için kalın ve siyah ağırlıkları gerekiyor mu? yazı tipi sınırlandırılması iyi bir fikir olduğunu kullanılmış ve burada bu konuda bazı iyi ipuçları vardır yalnızca ne yüklemek için ayarlar.

Birçok cihaz berbat bağlantılarda sıkışmış küçük ekranlar için sistem yazı tiplerini göz önünde bulundurun. Bir yazı, @media kullanarak özel yazı tipini yüklerken daha büyük ekranları hedeflemek olabilir.Bu örnekte

, daha küçük 1000 piksel yerine bir sistem yazı tipi hizmet ve geniş ve yukarıdaki özel yazı tipi sunulacaktır ekranlar olacak ekranları.

  • SONUÇ: Kullanım OTF/TTF küçük ekranlar için masaüstü ekran ve kullanım sistemi yazı tipleri için (tüm tarayıcılar) & EOT (yani) daha hızlı hale olarak. Ve google yazı tiplerini göz önünde bulundurun. Şimdiye kadar en iyi seçim.
+0

yardımsever dostum, lütfen cevabınızı düzenleyin ve teklifinizi ne sonuçta olduğunu söyleyin? tnx pal –

+1

Sonuç eklendi –

+1

o zaman bu doğru mu?! ttf' ve eot' ve 'svg' için mobile) –

0

Sadece krom (43) ve firefox (37) ve diğer bir deyişle (10) - test ettim, ancak her durumda sadece bir font formatı (sırasıyla: woff, woff ve eot) indirildi. Bu küçük örneklemeye dayanarak, * yazı tipi-yüz deklarasyonunuzdaki çeşitli dosya türlerinin dahil edilmesinin kullanıcı üzerinde olumsuz bir etkisi olmadığı görülüyor.
* Diğer tarayıcıların nasıl davrandığını biliyorsanız, bize bildirin.

+0

+1. Ancak iyi bir web geliştiricisi SADECE en iyi tarayıcıyı kontrol etmiyor, aynı zamanda örneğin 7 –

+1

gibi bir tarayıcıyı da test etmelisiniz. – danyamachine

İlgili konular