Neden bir font-yüzüne ttf, eot, woff, svg,… eklemeliyiz?

299

In CSS3 font-face gibi dahil çoklu yazı türleri vardır ttf, eot, woff, svgve cff.

Neden bu tiplerin hepsini kullanmalıyız?

Farklı tarayıcılara özelse, neden büyük web tarayıcılarının sayısından daha fazladır?

css font-face webfonts

— user16948
kaynak

Yanıtlar:

425

2019 yılında cevap:

Sadece WOFF2 kullanın veya eski desteğe ihtiyacınız varsa, WOFF. Başka bir format kullanmayın

( svgve eotölü biçimlerdir ttfve otftam sistem yazı tipleridir ve web amacıyla kullanılmamalıdır)

2012'den orijinal cevap:

Kısacası, font-face çok eskidir, ancak sadece son zamanlarda IE'den daha fazlası tarafından desteklenmiştir.

eot IE9'dan daha eski İnternet Kaşifleri için gereklidir - spesifikasyonu icat ettiler, ancak eot tescilli bir çözümdü.
ttfve otfnormal eski yazı tipleridir, bu yüzden bazı insanlar bunun herkesin lisanslı pahalı yazı tiplerini ücretsiz indirebileceği anlamına geldiler.
Zaman geçtikçe SVG 1.1, bir yazı tipinin yalnızca SVG işaretlemesi kullanılarak nasıl modelleneceğini açıklayan bir "yazı tipleri" bölümü ekler ve insanlar onu kullanmaya başlar. Daha fazla zaman geçiyor ve sadece normal bir yazı tipi formatına kıyasla kesinlikle korkunç ve SVG 2 akıllıca tüm bölümü tekrar kaldırıyor.
Daha sonra, woffalan adı bilgisi oldukça az olan insanlar tarafından icat edilir, bu da yazı tiplerini sistem kurulumu için kritik öneme sahip, ancak web için önemsiz olan (insanları korsanlıktan endişe eden) bitleri atacak şekilde barındırmayı mümkün kılar ve web'in ihtiyaçlarına daha iyi uyum sağlamak için dahili sıkıştırmaya olanak tanır (kullanıcıları ve ana bilgisayarları mutlu eder). Bu tercih edilen biçim haline gelir.
2019 edit Birkaç yıl sonra, woff2sıkıştırmayı geliştirerek daha da küçük dosyalara yol açan sıkıştırmayı geliştirir ve kabul eder, böylece tek bir yazı tipini "parçalar halinde" yükleyebilir, böylece 20 komut dosyasını destekleyen bir yazı tipi "parçalar" olarak saklanabilir "Bunun yerine diskte, tarayıcılar otomatik olarak yazı tipini" parçalara "yükleyebiliyor, tüm yazı tipini öne aktarmak zorunda kalmadan dizgi deneyimini daha da geliştiriyor.

IE 8 ve daha düşük sürümlerini ve iOS 4 ve daha düşük sürümlerini ve android 4.3 veya önceki sürümlerini desteklemek istemiyorsanız, o zaman WOFF'yi (ve onu destekleyen en yeni tarayıcılar için daha yüksek bir sıkıştırılmış WOFF olan WOFF2'yi) kullanabilirsiniz.

@font-face {
  font-family: 'MyWebFont';
  src:  url('myfont.woff2') format('woff2'),
        url('myfont.woff') format('woff');
}

Destek http://caniuse.com/woff adresindenwoff kontrol edilebilir. Destek http://caniuse.com/woff2 adresinden kontrol edilebilir.
woff2

— Zengin Bradshaw
kaynak

iOS 5, WOFF'ı destekliyor.

— Rob

woff... insanların yazı tipini korsan bırakmasını engelleyen bir moda mı sahip? Bu nasıl olabilir / nasıl çalışır?

— Mark Amery

TTF, WOFF'den daha hafif olmamalıdır. WOFF, TrueType - OpenType yazı tipinin (ttf ve otf) sıkıştırılmış bir şeklidir.

— toto_tico

WOFF'ın noktası korsanlıkla mücadele değildir. TypeKit , "OpenType / CFF yazı tiplerinin TrueType yazı tiplerine göre sahip olduğu iki ana avantajı 1) daha küçük dosya boyutudur ve 2) bazı kenar yumuşatmaya izin veren ortamlarda iyi işlemek için çok daha az ipucu bilgisi gerektirir. "

— Michael McGinnis

@Zelphir araçları, bu bayrakla gömülebilir fontlar oluşturmayı zorlaştırıyor ve değirmenci tasarımcınız programlama okuryazar değil ve sadece biri parlak bir "korsan yazı tipi" düğmesi olan bir Mac uygulaması tasarladığında bayrağı kaldırabilir. Dahası, eğer bir şirket ise, yasal suçlamalar getirebilirsiniz. Blog sahibi bir adamsa, onlarla konuşun, başarısız oldular, ev sahibi vb. - ancak yazı tipinizi satın alamayan insanların zaten potansiyel müşteri olmadığını unutmayın, bu yüzden ücretsiz tanıtımın daha değerli olduğunu söyleyebilirim onları dafont'taki en yakın şey için değiştirmeye ikna etmenin zorluğundan daha fazla.

— Camilo Martin

Woff, TrueType - OpenType yazı tipinin sıkıştırılmış (sıkıştırılmış) bir şeklidir. Küçüktür ve bir grafik dosyası gibi ağ üzerinden teslim edilebilir. En önemlisi, bu şekilde yazı tipi, yalnızca Latin alfabesi kullandıkları için çok az kişinin önem verdiği kural tablolarını oluşturma da dahil olmak üzere tamamen korunur.

[Ölü URL kaldırıldı] 'ya bir göz atın. Gördüğünüz yazı tipi, karmaşık şekiller oluşturan binlerce kombine karakter içeren deneysel bir web teslim smartfont (woff). Temel metin romanize Singhala'nın basit Latin kodudur. (Kopyalayıp Not Defteri'ne yapıştırın ve bakın).

Sadece woff bunu yapabilir, çünkü kimse bu yazı tipine sahip değildir ve yine de herhangi bir yerde görülmez (Mac, Win, Linux ve hatta akıllı telefonlar üzerinde IE hariç tüm tarayıcılar tarafından. IE Açık Türler için tam desteğe sahip değildir).

— user2422970
kaynak

Bu web sitesinde özel bir şey görmüyorum. Bir düzenleyiciye kopyalarsam (utf8 desteği var) hala sadece normal metni görüyorum. Woff tam olarak ne yapar?

— Zelphir Kaltstahl

Bu cevabın üçte ikisi yanlış veya alakasız. Ayrıca bu bağlantı koptu.

— Yay295

Brotli sıkıştırma algoritmasına ve dosya boyutunda% 30'dan fazla azalma sağlayan WOFF 1.0 üzerindeki diğer geliştirmelere dayanan WOFF 2.0, Chrome, Opera ve Firefox'ta desteklenmektedir.

http://en.wikipedia.org/wiki/Web_Open_Font_Format http://en.wikipedia.org/wiki/Brotli

http://sth.name/2014/09/03/Speed-up-webfonts/ nasıl kullanılacağına dair bir örnek var.

Temel olarak woff2 dosyasına bir src url ekler ve woff2 biçimini belirtirsiniz. Bunu woff biçiminden önce almanız önemlidir: tarayıcı desteklediği ilk biçimi kullanır.

— Jyrki Alakuijala
kaynak