Yalnızca WOFF ve EOT'um varsa, @ font-face ile hangi tarayıcıları destekliyorum?


16

Web'de yalnızca sağlanan biçimlerde kullanılmasına izin veren bir yazı tipi satın almayı amaçlıyoruz: WOFF ve EOT.

Bu tarayıcıların hangi tarayıcılarda çalıştığından ve güncel bilgiler bulamadıklarından emin değilim. Sadece bu iki tarayıcıyla hangi tarayıcıları destekleyebilirim?

Benim tek deneyimim fontspring'in EOT, WOFF, TTF ve SVG sözdizimi ile.


Yanıtlar:


23

Bu @ font-face , hacky fixes ve hepsi ile yükleme standart bir yoludur !!

@font-face {
    font-family: 'BebasNeueRegular';
    src: url('BebasNeue-webfont.eot');
    src: url('BebasNeue-webfont.eot?#iefix') format('embedded-opentype'),
         url('BebasNeue-webfont.woff') format('woff'),
         url('BebasNeue-webfont.ttf') format('truetype'),
         url('BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Ancak SVG'yi kaldırın , iOS 5.0'ın desteğini neredeyse tamamen kaybedersiniz

Can I Kullanım için mükemmel bir tablosu olan genel tarayıcı desteği diğeri için EOT , başka woff henüz başka SVG daha ve son olarak bir TTF . Açıklık için bunları aşağıya ekledim ve bu, neyi test edeceğiniz konusunda size yol göstermelidir, ancak bunun oldukça hızlı bir şekilde değişeceğini unutmayın.

Wyu ile düzenle : Bir tabloyu derledim, böylece desteği yan yana görebilirsiniz

@ font-face tarayıcı desteği

@ font-face tarayıcı desteği

EOT tarayıcı desteği

EOT tarayıcı desteği

WOFF tarayıcı desteği

WOFF tarayıcı desteği

SVG tarayıcı desteği

SVG tarayıcı desteği

TTF tarayıcı desteği

TTF tarayıcı desteği


3
eot neden iki farklı şekilde bildirilir - .eot ve .eot? #iefix?
sam


2
Gelecekte bu yanıtı kontrol eden herkes için ... Android> = 4.4 şimdi WOFF'i
ozke

3
Sevgili @ ozke, ben gelecekten geliyorum, bu yararlı gerçeği paylaştığın için teşekkür ederim. Ayrıca, 2015'in sonunda, Android stok tarayıcısının desteklemeyen sürümlerinin kullanımının woffküresel kullanıcıların% 2'sinden daha azına düşeceğini ve stok Android tarayıcısının Chrome tarafından Her ikisi de destekleyen Android (% 16) ve UC (% 8) woff. Android için Firefox da; ancak, kullanımı asla% 1'i aşmayacaktır. Şimdi Ekim 2014'te alışılmış olduğunu anladığım Meghan Trainor tarafından "Her Şey Hakkında Bu Bas" ı dinlemeye geri dönebilirsiniz.
user56reinstatemonica8

şimdi sadece web yazı tiplerine mi ihtiyacınız var?
SuperUberDuper

1

SVG @ font-face ile sizi hiçbir yere götürmez; ancak EOT IE tarafından desteklenir; TTF ve OTF, diğer tüm büyük tarayıcılar tarafından desteklenir. WOFF'ye gelince, TTF ve OTF ile benzerliği ile biraz okuma yapmaktan, TTF veya OTF ile aynı tarayıcılarda desteklenmesi oldukça olasıdır. Benim önerim, eğer gerçekten ilgileniyorsanız, bir @ font-face uzantısını bir tarayıcıda deneyin ve ne aldığınızı görün ve ardından @ font-face tanımlayıcısı için standartlar sayfasını güncellemek için W3C'ye ne aldığınızı gönderin. (Şu anda "güvenli" yazı tipi uzantılarını bile içermiyor).

Her şey başarısız olursa, eminim W3Schools günceldir: http://www.w3schools.com/cssref/css3_pr_font-face_rule.asp


Sorun Safari Mobile 4.1 ve önceki sürümlerin yalnızca SVG'yi desteklemesidir.
toomanyairmiles

@toomanyairmiles Bu nedenle, sonunda "varsayılan" için iyi görünmesini ve sonra "görüntüleyebilecek" olanlar için şaşırtıcı görünmesini sağlamak. Çoğu yazı tipinde OTF, EOT ve SVG bulunmadığından% 100 kapsama alınamaz.
Jeff Langemeier

Aslında yapabilirsin. Dört türün hepsinde gelen yazı tiplerini satın alarak veya ücretsiz yazı tiplerini kullanarak ve dosyaları kendim oluşturarak% 100 kapsama sahip birkaç site oluşturdum - mükemmel çalışıyor.
toomanyairmiles

@toomanyairmiles Burası hızlı ve gevşek yazmanın beni öldürdüğü, gerekli Olduğu yer Her zaman% 100 kapsama sahip olamaz, bazen olmaz ve tasarımcının en kötü senaryoda insanların eski tarayıcıları kullandığını ve 100 % kapsam her zaman% 100 kapsam anlamına gelmez; İnternet kullanıcılarının yaklaşık% 40-50'sinde hala ilk etapta font yüzünü çok iyi desteklemeyen IE 7 veya daha eski sürümleri kullanıyorum, gerçek% 100 kapsama alanı olması için bir alt satır olması gerekiyor "iyi" görünüyor veya en azından sitenizi "meraklı" yazı tiplerinin kısıtlamaları dahilinde tutuyor.
Jeff Langemeier

Küçük siteler ve büyük markaların sitelerinde denedim. IE6 ve 7 yazı tipleri, render kalitesi modern bir tarayıcı kadar iyi mi? Hayır, ama gayet iyi çalışıyor.
toomanyairmiles

1

Webfont satıcılarının yazı tipleri için yarasadan eot desteği sağlaması gerekiyor - özellikle bu nedenle! Bunun, bulut tabanlı (dahil etme veya hariç tutma seçeneği ile) için bile ikinci bir doğa olacağını düşünürsünüz - insanlar kara listeye alınmış fontları avlamak zorunda kalırsa, bu sadece yazı tipleri bulunduğunda korsanlığı teşvik etmez mi? @ eb_p1


1
Bekle, neden? Bu soru ilk sorulduğunda EOT öldü, cevapladığınızda çürüyen bir cesetti ve bugün bir yıldan fazla bir süredir EOT yazı tipi görmedim.
SilverbackNet
Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.