Bir web yazı tipi tam olarak nedir ve bir yazı tipine dönüştürmek ne içerir?


15

Bu konuda birkaç makale okudum ama web yazı tipleri ve masaüstü yazı tipleri arasındaki gerçek teknik farklılıklar hala beni atlatıyor. Konu hakkında ne kadar çok okursam o kadar kimse tam olarak bir webfont ne olduğunu net bir teknik tanımı var hissediyorum.

FontSquirrel gibi bir webfont üreten hizmete "masaüstü" yazı tipi yüklediğimde, bu hizmetler yazı tipi dosyasına web yazı tipi yapmak için tam olarak ne yapar? Bu hizmetlerin birincil kullanımı farklı biçimlere dönüşümse, 2019'dan itibaren makul sayıda tarayıcıyı desteklemek için modern web'de hangi biçimlere ihtiyaç vardır?

Yanıtlar:


17

"Web yazı tipi" yalnızca web'de veya tarayıcıda kullanılan bir yazı tipidir. Bu web yazı tipi jeneratörlerinin yaptığı, yazı tipinizi ziyaretçilere sunmak için gerekli css'yi sağlayarak ve yazı tipinin çapraz tarayıcıda çalıştığından emin olmak için ihtiyacınız olan tüm dosya formatlarına dönüştürerek hayatınızı kolaylaştırmaktır.

Bazı yazı tipleri, "Arial" gibi her bilgisayarda bulunacak kadar yaygın olduğu için "web uyumlu" olarak kabul edilir. Hiçbir şey yapmanız gerekmez, ancak web sitesine bu yazı tipini kullanmasını söyleyin. Web yazı tiplerinin ziyaretçinin tarayıcısı tarafından indirilmesi gerekir, çünkü bilgisayarınızda bir yazı tipi yoksa, onu göremezsiniz.

Woff gibi web için özel olarak geliştirilen font formatları, küçük dosya boyutları göz önünde bulundurularak tasarlanmıştır. Google yazı tipleri size bu şekilde farklı formatlar sunar, sadece biraz gizlidir.

Bazı yazı tiplerinin, yazı tipi dosyalarına sahip olsanız bile sahip olamayabileceğiniz ayrı bir web yazı tipi lisansına sahip olabileceğini unutmayın. Tıpkı google görüntüleri gibi ... Görüntüyü indirebildiğiniz için, şirketinizin tıraş sonrası satışını yapabileceğiniz anlamına gelmez.

Developers.google.com , web yazı tipi optimizasyonuna odaklanan ancak temel bilgilerle ilgili iyi bir yazıya sahiptir.

Bu makaledeki farklı biçimler hakkında oldukça iyi bir alıntı var:

Günümüzde web üzerinde kullanılan dört font kabı biçimi vardır: EOT, TTF, WOFF ve WOFF2. Ne yazık ki, çok çeşitli seçeneklere rağmen, tüm eski ve yeni tarayıcılarda çalışan tek bir evrensel format yoktur: EOT sadece IE'dir, TTF kısmi IE desteğine sahiptir, WOFF en geniş desteğe sahiptir, ancak bazı eski tarayıcılarda mevcut değildir ve WOFF 2.0 desteği birçok tarayıcı için devam eden bir çalışmadır.

Peki, bu bizi nereye bırakıyor? Tüm tarayıcılarda çalışan tek bir biçim yoktur, yani tutarlı bir deneyim sağlamak için birden çok biçim sunmamız gerekir.

Transfonter'ın tarayıcı desteği hakkında da oldukça iyi bir tablosu var:

resim açıklamasını buraya girin resim açıklamasını buraya girin


6
Bu destek tabloları güncel değil. Bunun yerine caniuse.com'u kullanın: caniuse.com/#search=woff2
curiousdannii

Doğru. Ben kullandım çünkü tüm formatları bir arada vardı ve size çeşitli tarayıcı desteği hakkında bir hikaye anlattığını düşündüm, bu yüzden bu yazı tipi jeneratörleri bir şeydir. Biraz konu dışı olduğunu düşündüğüm için bunu bırakmayı düşündüm ama açıkça OP'nin bu konuya ne kadar önem verdiğini fark etmedim .
Joonas

Tüm profesyonel web geliştiricilerinin bunu önemsemesi gerektiğine inanıyorum. Burada karmaşık teoriden bahsediyoruz gibi değil - tarayıcı kullanımı ve iyi UX'in web siteleri için çok gerçek etkileri var. Örneğin, Hindistan'daki kullanıcılara çok fazla trafik çeken bir e-ticaret sitesi çalıştırıyorsanız, bu kullanıcıların geri kalan kullanıcılarınızla aynı düzeyde UX aldığından emin olmak istemez misiniz?
Hashim

@Hashim, yorumun kötü olduğunu düşündüm. Orijinal yazı "web yazı tipi nedir" dir ve 2019'da hangi formatlara ihtiyacınız olduğuna dair en sonunda hapşırdığınız soru, özellikle web yazı tipi jeneratörlerini merak ettiğinizde bana sonradan düşündüğü gibi geldi ... Ve kullandığınızda Bu jeneratörlerden biri, bu bilgiler biraz gereksiz hale geliyor, çünkü sonuçta çapraz tarayıcı çözümü. Ama sonra, her formatı parçaladığınız o postayı yaptınız, bu da bilinçli olarak ihmal ettiğim cevabın bölümünün size beklediğimden daha büyük bir şey gibi göründüğünü fark etmemi sağladı.
Joonas

1
@Hashim, yine, benden kötü kelime seçimi. Düşüncelerim, "İşte bir web yazı tipinin ne olduğunu bilmeyen bir kişi. Web yazı tipi jeneratörleri hakkında konuşuyor. Tamam, eğer kullanacaksa o son kısmı bilmesine gerek yok bir jeneratör ... Ama bu jeneratörlerin neden bir şey olduğunu resmetmek için bazı tarayıcı istatistikleri ekleyeyim ". Bir şey olursa, bir sonraki adımı attığınız ve kendinize baktığınız için sizi alkışlıyorum.
Joonas

3

Bu soruyu sorduktan sonra biraz daha ayrıntılı bir araştırma yaptım ve bu cevabı Joonas'a bir tür zeyilname olarak ekliyorum, ki bu iyiydi ama son sorumu benim için yeterince ayrıntılı olarak cevaplamadı:

Bu hizmetlerin birincil kullanımı farklı biçimlere dönüşümse, 2019'dan itibaren makul sayıda tarayıcıyı desteklemek için modern web'de hangi biçimlere ihtiyaç vardır?

Birçok geliştirici, WOFF ve WOFF2'nin modern web geliştirmede ihtiyaç duyulan tek yazı tipi formatları olduğunu iddia ediyor . Ancak bu cevaplar iyi kaynaklanmamıştır ve ben de biraz aşırı hevesli olduklarını düşünüyorum, bu yüzden bunu belgelemek için endüstri standardı olan CanIUse.com'un izniyle olan WOFF ve WOFF2 için gerçek destek rakamlarına bakarak başlayalım. bir şey.

WOFF2 desteği

WOFF2 , WOFF'de her şekilde gelişir, 2014'ten sonra piyasaya sürülen çoğu masaüstü tarayıcısı tarafından desteklenir, ancak sadece 2018'den beri çoğu mobil tarayıcı tarafından desteklenmeye başlamıştır. Dünya genelinde tarayıcıların yaklaşık % 93'ü tarafından desteklenmektedir .

WOFF desteği

WOFF , Internet Explorer tarafından (2011'de piyasaya sürülen) IE9'da desteklenmeye başladı ve bu da EOT formatını 2011'den beri yayınlanan IE sürümleri için geçersiz kılıyor . Küresel olarak tarayıcıların yaklaşık % 97'si tarafından destekleniyor .

Diğer masaüstü tarayıcıları, Firefox 3.6'dan beri Firefox, Chrome 5'ten beri Chrome ve 5.1'den bu yana Safari (sırasıyla 2010, 2011 ve 2011'de piyasaya sürüldü) dahil olmak üzere yaklaşık olarak WOFF'yi desteklemeye başladı ve TTF ve OTF 1 formatlarını önceki sürümlerde geçersiz kıldı . Çoğu mobil tarayıcı 2013'ten beri WOFF'yi destekliyor.

Uyarılar ve Sonuçlar

Bu açıdan, diğer tüm formatları gereksiz olarak yazmak yeterince kolaydır, ancak artık resmi olarak desteklenmeyen yazılımlar artık kullanılmadığının iyi bir göstergesi olmamıştır. Başka bir deyişle, global tarayıcı sürümü paylaşımının, web sitenizin kullanacağı demografik bilgileri temsil ettiği garanti edilmez.

Tarayıcı sürümü paylaşımı demografik özelliklere göre önemli ölçüde değişebilir: ülke, sosyal sınıf ve gelir gibi faktörlerin tümü, kullanıcılarınızın hangi cihazları (ve dolayısıyla tarayıcı sürümlerini) kullandığını büyük ölçüde etkiler. Bir geliştirici olarak, oluşturduğunuz sitenin bu eski sürümleri kullanma olasılığı daha yüksek olan demografi tarafından kullanılıp kullanılmayacağını düşünün.

Durumun böyle olduğuna karar verirseniz ve 2011'den daha eski masaüstü tarayıcılarını veya 2013'ten daha eski mobil tarayıcıları desteklemeniz gerekiyorsa, tam yazı tipi yığınını kullanın: WOFF2, WOFF, TTF (veya OTF) ve EOT.

Bu eski tarayıcıları desteklemeniz gerekmiyorsa ve muhtemelen daha fazlasını yapmadığınız doğruysa, buradaki yazı tipi yığını olarak WOFF2 ve WOFF'yi kullanın.


(1) TTF ve OTF geleneksel masaüstü yazı tipi formatlarıdır ve birini destekleyen herhangi bir tarayıcı diğerini destekler, bu yüzden asla ikisini de kullanmayın


İlgili: Komut satırını kullanarak TTF / OTF yazı tipi dosyalarının WOFF ve WOFF2 biçimlerine nasıl dönüştürüleceği (ve bu nedenle, her seferinde bir tane yerine toplu olarak).
Hashim

1

Fazla değil.

WOFF, TTF için sıkıştırılmış bir formattan başka bir şey değildir, bu da daha küçük boyutlara neden olur. İç kısımlar değişmez. WOFF2 biraz daha ileri gider, biraz daha fazla sıkıştırma eklemek için yazı tipi sunumunu biraz değiştirir. Yalnızca MS biçiminde olan EOT hiç sayılmaz. SVG yalnızca pratik olarak konturlar, neredeyse daha fazla değildir, bu yüzden gerçek bir yazı tipi olarak sayılmaz, yalnızca simgeler için kullanın.

Sadece WOFF kullanın ve onunla yapın. Son baytı sıkıştırmak istiyorsanız, WOFF2'yi de sunmak isteyebilirsiniz, ancak fark göz ardı edilebilir.


0

Yine de gerçekten temel bir şeyi vurgulamak istiyorum: bir "webfont", teknik uygulama ayrıntıları bir yana, yaratıcısı veya bir web sitesinde kullanma görevi için bir hak sahibi tarafından lisanslanmış bir yazı tipi. Ve bunlar bir webfont formatında gelecek. Bir yazı tipini web yazı tipi biçimine dönüştürmek için bir jeneratörün önünde oturuyorsanız ve bu açık kaynak veya kendiniz çizdiğiniz bir yazı değilse, burada durun! Neredeyse kesinlikle lisansı bozuyorsunuz ve dava açabilirsiniz. Web'de olduğu için, insanların yaptıklarınızı bulmaları ve satış listelerini kontrol etmeleri kolaydır.

Örneğin , Facebook ve Google için iş yapan bu birisi, web sitesinde korsan bir yazı tipi kullandığını ona söyleyene kadar fark etmeyen bu doofus'a bakın . Masaüstü abonelik lisansı vardı, ancak bu web kullanımı için bir lisans değil.

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.