@sourdiesel
· 2941 gün önce
yüklenir yazıyüzleri
Daha iyi bir Türkiye mümkün!
Türkiye'nin girişimcilik ve inovasyon topluluğu·2018'den beri
Rastgele başlık
İnovasyon ve Girişimcilik Sözlüğü
inovanadolu Sözlük, içeriği kullanıcılar tarafından oluşturulan, inovasyon, girişimcilik, teknoloji vb. konularda başlıkların oluşturulduğu ve tanımlandığı, kategorisindeki en büyük Türkçe kaynaktır.
@sourdiesel
· 2941 gün önce
@navigator
· 27 gün önce
kullanıcının bilgisayarında kurulu olmasa bile sayfayla birlikte indirilen yazı tipleri; web'de karşılığı css'teki @font-face kuralı. tarayıcı, sayfada tanımlı yazı tipi dosyasını (woff2, woff, ttf) sunucudan çekip yalnızca o sayfa için kullanıyor, sisteme kurmuyor.
kısa tarihçe: internet explorer 4 (1997) ilk deneyen tarayıcıydı ama kendi kapalı formatıyla (eot) geldi ve kimse takip etmedi. asıl kırılma 2009'da css3 fonts modülü ve woff formatıyla oldu; 2014'te google'ın brotli sıkıştırmalı woff2'si standartlaştı. bugün pratikte tek format woff2 yetiyor, eski tarayıcı desteği için woff eklenir.
en çok yapılan hata font-display'i boş bırakmak. tarayıcı yazı tipini indirirken metni gizlerse (foit) sayfa boş görünüyor; font-display: swap ile önce sistem yazı tipi gösterilip indirme bitince değişiyor. ikinci hata tüm alfabeyi yüklemek: latin extended alt kümesi (türkçe karakterler dahil) çoğu site için yeterli ve dosya boyutu yarıya iniyor.
lisans tarafı: google fonts'taki yazı tiplerinin çoğu sil open font license ile geliyor, ticari sitede ücretsiz kullanılabiliyor. ücretli yazı tiplerinde web lisansı ayrı satılıyor, masaüstü lisansı web kullanımını kapsamıyor. bir de kvkk ve gdpr notu: google fonts'u google sunucusundan çekmek ziyaretçinin ip adresini google'a iletiyor; almanya'da bu yüzden ceza kesilen siteler var. dosyayı kendi sunucundan sunmak (self-host) hem daha hızlı hem daha temiz.
kısa tarihçe: internet explorer 4 (1997) ilk deneyen tarayıcıydı ama kendi kapalı formatıyla (eot) geldi ve kimse takip etmedi. asıl kırılma 2009'da css3 fonts modülü ve woff formatıyla oldu; 2014'te google'ın brotli sıkıştırmalı woff2'si standartlaştı. bugün pratikte tek format woff2 yetiyor, eski tarayıcı desteği için woff eklenir.
en çok yapılan hata font-display'i boş bırakmak. tarayıcı yazı tipini indirirken metni gizlerse (foit) sayfa boş görünüyor; font-display: swap ile önce sistem yazı tipi gösterilip indirme bitince değişiyor. ikinci hata tüm alfabeyi yüklemek: latin extended alt kümesi (türkçe karakterler dahil) çoğu site için yeterli ve dosya boyutu yarıya iniyor.
lisans tarafı: google fonts'taki yazı tiplerinin çoğu sil open font license ile geliyor, ticari sitede ücretsiz kullanılabiliyor. ücretli yazı tiplerinde web lisansı ayrı satılıyor, masaüstü lisansı web kullanımını kapsamıyor. bir de kvkk ve gdpr notu: google fonts'u google sunucusundan çekmek ziyaretçinin ip adresini google'a iletiyor; almanya'da bu yüzden ceza kesilen siteler var. dosyayı kendi sunucundan sunmak (self-host) hem daha hızlı hem daha temiz.
@endof
· 26 gün önce
android tarafında ayrı bir anlamı var: android 8.0 (api 26) ile gelen ve androidx ile eski sürümlere de taşınan downloadable fonts api'si. uygulama, yazı tipini apk'nın içine gömmek yerine çalışma zamanında bir font sağlayıcıdan (pratikte google play services üzerinden google fonts) istiyor; indirilen dosya cihazda önbelleğe alınıyor ve aynı yazı tipini isteyen diğer uygulamalarla paylaşılıyor.
kazancı iki yönlü: apk boyutu küçülüyor (bir yazı tipi ailesi kolayca birkaç megabayt tutuyor) ve aynı yazı tipi cihazda bir kez duruyor. kullanımı da basit: android studio'da bir textview'a fontfamily seçerken "downloadable fonts" sekmesinden yazı tipi seçiliyor, res/font altında bir xml ve manifest'e preloaded_fonts girişi otomatik oluşuyor. kodla yapmak isteyen fontrequest ve fontscontract sınıflarını kullanıyor.
dikkat edilecekler: uygulama ilk açılışta çevrimdışıysa yazı tipi gelmiyor, bu yüzden sistem yazı tipine düşen bir fallback şart. sağlayıcı kimliği (sertifika) manifest'te doğru tanımlı değilse istek sessizce başarısız oluyor; en sık takılınan yer burası. google play services olmayan cihazlarda (bazı huawei modelleri) api hiç çalışmıyor, o cihazlar için yazı tipini gömmek gerekiyor.
web'deki @font-face ile aynı fikrin mobil uyarlaması; fark, indirme ve önbelleğin sistem seviyesinde yönetilmesi.
kazancı iki yönlü: apk boyutu küçülüyor (bir yazı tipi ailesi kolayca birkaç megabayt tutuyor) ve aynı yazı tipi cihazda bir kez duruyor. kullanımı da basit: android studio'da bir textview'a fontfamily seçerken "downloadable fonts" sekmesinden yazı tipi seçiliyor, res/font altında bir xml ve manifest'e preloaded_fonts girişi otomatik oluşuyor. kodla yapmak isteyen fontrequest ve fontscontract sınıflarını kullanıyor.
dikkat edilecekler: uygulama ilk açılışta çevrimdışıysa yazı tipi gelmiyor, bu yüzden sistem yazı tipine düşen bir fallback şart. sağlayıcı kimliği (sertifika) manifest'te doğru tanımlı değilse istek sessizce başarısız oluyor; en sık takılınan yer burası. google play services olmayan cihazlarda (bazı huawei modelleri) api hiç çalışmıyor, o cihazlar için yazı tipini gömmek gerekiyor.
web'deki @font-face ile aynı fikrin mobil uyarlaması; fark, indirme ve önbelleğin sistem seviyesinde yönetilmesi.
@sammy
· 24 gün önce
türkçesi "yüklenir yazıyüzleri" ya da "indirilebilir yazı tipleri". kavramı bilen için asıl soru "nasıl kullanılır" değil "nasıl hızlı kullanılır", çünkü yazı tipi indirme çoğu sitede en büyük performans kaybı.
kontrol listesi:
1. sadece kullandığın ağırlıkları yükle. dört ağırlık (400, 500, 600, 700) dört ayrı dosya demek; çoğu site iki ağırlıkla idare eder. değişken yazı tipi (variable font) varsa tek dosya tüm ağırlıkları taşır.
2. alt küme çıkar. google fonts adresine text parametresi ekleyerek sadece belirli karakterleri, ya da subset ile latin-ext alt kümesini alabilirsin. türkçe için latin-ext şart; yoksa ş ve ğ harfleri başka yazı tipinden gelir ve metin kirli görünür.
3. en önemli yazı tipini preload et. head içinde link rel=preload ile tarayıcıya css'i beklemeden indirmeye başlamasını söylüyorsun; ilk boyama süresi belirgin düşüyor.
4. font-display: swap veya optional. swap, metni hemen gösterip sonra değiştirir; optional, yazı tipi zamanında gelmezse o sayfa için hiç kullanmaz (düzen kayması sıfır). seo tarafında core web vitals'ın cls metriği tam burada devreye giriyor; yazı tipi değişince satırlar kayıyorsa puan düşüyor. size-adjust ve ascent-override ile fallback yazı tipini asıl yazı tipine yaklaştırmak kaymayı azaltıyor.
5. kendi sunucundan sun. üçüncü taraf bağlantı maliyeti (dns, tls) ve gizlilik derdi ortadan kalkıyor; woff2 dosyalarını uzun süreli cache başlığıyla ver.
bunları yapan bir sitede yazı tipi yükü genelde 50 ile 80 kilobayt arasına iniyor; yapmayanda 400 kilobaytı aşıyor.
kontrol listesi:
1. sadece kullandığın ağırlıkları yükle. dört ağırlık (400, 500, 600, 700) dört ayrı dosya demek; çoğu site iki ağırlıkla idare eder. değişken yazı tipi (variable font) varsa tek dosya tüm ağırlıkları taşır.
2. alt küme çıkar. google fonts adresine text parametresi ekleyerek sadece belirli karakterleri, ya da subset ile latin-ext alt kümesini alabilirsin. türkçe için latin-ext şart; yoksa ş ve ğ harfleri başka yazı tipinden gelir ve metin kirli görünür.
3. en önemli yazı tipini preload et. head içinde link rel=preload ile tarayıcıya css'i beklemeden indirmeye başlamasını söylüyorsun; ilk boyama süresi belirgin düşüyor.
4. font-display: swap veya optional. swap, metni hemen gösterip sonra değiştirir; optional, yazı tipi zamanında gelmezse o sayfa için hiç kullanmaz (düzen kayması sıfır). seo tarafında core web vitals'ın cls metriği tam burada devreye giriyor; yazı tipi değişince satırlar kayıyorsa puan düşüyor. size-adjust ve ascent-override ile fallback yazı tipini asıl yazı tipine yaklaştırmak kaymayı azaltıyor.
5. kendi sunucundan sun. üçüncü taraf bağlantı maliyeti (dns, tls) ve gizlilik derdi ortadan kalkıyor; woff2 dosyalarını uzun süreli cache başlığıyla ver.
bunları yapan bir sitede yazı tipi yükü genelde 50 ile 80 kilobayt arasına iniyor; yapmayanda 400 kilobaytı aşıyor.