Başka bir eşleştirme ekran yayını zamanı! Bu sefer Filament Group'tan Zach Leatherman var. Zach, geçtiğimiz birkaç yıl içinde web yazı tipi yüklemesi hakkında çok fazla araştırma, yazma ve konuşma yaptı. Bununla ilgili kapsamlı bir rehberi var!
Özel yazı tiplerinin varsayılan yüklenme biçiminde bazı sorunlar vardır. Olduğu gibi, bazı CSS'deki bir yazı tipini @ font-face aracılığıyla bağlamak. Google Yazı Tiplerinin yazı tiplerini kullanmanızı sağlama şekli bile Zach bir anti-model (sonuçta sadece vanilya @ font-face) diyor. Farklı tarayıcılar @ font-face ile farklı şeyler yapar. Örneğin, Safari'nin bazı sürümleri, yazı tipi yüklenene kadar özel bir yazı tipinde yazıyı görünmez yapar, ancak zaman aşımı yoktur; bu nedenle, yazı tipi herhangi bir nedenle başarısız olursa, en kötü durum senaryosunda olabilirsiniz: sonsuza kadar görünmez metin site.
@ Font-face fontların nasıl yükleneceği üzerinde çok fazla kontrole sahip değilsiniz, meseleleri kendi ellerinize almadığınız sürece. Bu, yazı tipini satır içine almak, yazı tipini alt küme haline getirmek ("kritik" bir glif kümesiyle veya en azından glifleri kullanımdaki dile indirgemek), yazı tiplerinin ne zaman yüklendiğini belirlemek için yazı tipi yükleyicileri kullanmak ve bunları kullanmak için sınıfları değiştirmek gibi şeyler anlamına gelir. . Sonuncusu özellikle ilginç. Yazı tipi yükleme üzerinde kontrol uygularken, yalnızca tarayıcının @ font-face içeren CSS'yi ne zaman / nasıl yüklediğiyle değil, aynı zamanda tarayıcının bu yazı tiplerini kullanması söylenen metin öğeleriyle ne zaman / nasıl karşılaştığıyla da ilgilenmeniz gerekir. Kullanılmayan yazı tipleri indirilmez. Bu yüzden bazen prosedür, onları indirmeye zorlamak, indirmelerini beklemek, sonra onları gerçekten kullanmak için sınıfları uygulamaktır.
Baktığımız bazı araçlar:
- Firefox DevTools, kullanılan yazı tiplerine bakmak için daha iyiydi
- Yazı tiplerini alt küme oluşturma, Yazı Tipi Squirrel oluşturucu veya Yazı Tipi Hazırlığı'nda yapılabilir.
- Hangi glifleri alt kümelersiniz? Glyphhanger ile belirli URL'lerde neye ihtiyacınız olduğunu test edin.
- Tarayıcının sahte kalın / italik kullandığını nasıl anlarsınız? gaf.