Web yazı tiplerini verimli şekilde yayınlamak için Google Fonts CSS API'yi kullanma.
Yıllar içinde web yazı tipleri teknolojisi ile birlikte pek çok şey değişti. Eskiden metin resmi veya Flash eklentisi gerektiren, ancak web sitenizin arama motoru optimizasyonunu tehlikeye atan niş uygulamalar, artık web genelinde standart bir uygulamadır. Bir zamanlar, sayfa yüklenmeden önce yazı tipinin tamamını, belki de hiç kullanmamış olabileceğiniz stiller ve karakterlerle yüklemeniz gerekiyordu. Ancak bu özellik bile artık geçmişte kaldı.
Google Fonts CSS API de yıllar içinde web yazı tipleri teknolojisindeki değişikliklere ayak uyduracak şekilde geliştirildi. Tarayıcınızın, API'yı kullanan tüm web sitelerinde yaygın olarak kullanılan yazı tiplerini önbelleğe almasını sağlayarak web'i daha hızlı hale getirmek, başlangıçtaki değer teklifinden epey yol katetti. Bu durum artık geçerli değil ancak API, web sitelerinin hızlı bir şekilde yüklenmesi ve yazı tiplerinin düzgün çalışması için ek ve önemli optimizasyonlar sağlamaya devam ediyor.
Google Fonts CSS API'yi kullanarak web siteniz, CSS yükleme süresini minimumda tutmak için yalnızca gereken yazı tipi verilerini isteyebilir. Böylece, web sitenizin ziyaretçileri, içeriğinizi mümkün olan en kısa sürede yükleyebilir. API, her isteğe söz konusu web tarayıcısı için en iyi yazı tipiyle yanıt verir.
Bunların tümü, kodunuza tek bir HTML satırı eklemekle gerçekleşir.
Google Fonts CSS API'yi kullanma
Google Fonts CSS API dokümanları, konuyu güzel bir şekilde özetlemektedir:
Herhangi bir programlama yapmanız gerekmez. Tek yapmanız gereken HTML dokümanınıza özel bir stil sayfası bağlantısı eklemek ve ardından CSS stilinde yazı tipine başvurmaktır.
Yapmanız gereken minimum şey HTML'nize aşağıdaki gibi tek bir satır eklemektir:
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" rel="stylesheet" />
API'den yazı tipi istediğinizde hangi aileyi istediğinizi ve isteğe bağlı olarak ağırlıklarını, stillerini, alt kümelerini ve diğer birçok seçeneği belirtebilirsiniz. Ardından API, isteğinizi şu iki yöntemden birini kullanarak işler:
- İsteğiniz, API'de zaten dosya bulunan ortak parametreleri kullanıyorsa CSS'yi hemen kullanıcınıza döndürerek kullanıcıyı bu dosyalara yönlendirir.
- API'nin şu anda önbelleğe almadığı parametrelere sahip bir yazı tipi istediyseniz bu yazı tipi, HarfBuzz kullanılarak anında yazı tiplerini alt gruplara ayırır ve bunlara işaret eden CSS'yi döndürür.
Yazı tipi dosyaları büyük olabilir, ancak bu tür dosyalar çok olmak zorunda değildir
Web yazı tipleri büyük olabilir. Evet, hepsi bu kadar. WOFF2'de tek bir Noto Sans Japonca ağırlığı neredeyse 3,4 MB'tır.Bu boyutu kullanıcılarınızın her birine indirmeniz, sayfanızın yüklenme süresinde büyük bir artışa neden olur. Her milisaniye önem taşır ve her bayt değerliyse yalnızca kullanıcılarınızın ihtiyaç duyduğu verileri yüklediğinizden emin olmak istersiniz.
Google Fonts CSS API'si, kullanıcılarınıza yalnızca web sitenizin gerektirdiği metin ve stilleri sunmak için gerçek zamanlı olarak oluşturulan çok küçük yazı tipi dosyaları (alt küme olarak adlandırılır) oluşturabilir. Yazı tipinin tamamını sunmak yerine text parametresini kullanarak belirli karakterleri isteyebilirsiniz.
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />
CSS API, herhangi bir API parametresi olmadan kullanıcılarınıza otomatik olarak ek web yazı tipi optimizasyonları da sağlar. API, kullanıcılarınıza unicode-range öğesinin zaten etkin olduğu (web tarayıcıları tarafından destekleniyorsa) CSS dosyaları sunar. Böylece kullanıcılar, yazı tiplerini yalnızca web sitenizin ihtiyacı olan belirli karakterler için yükler.
Unicode aralığı CSS açıklayıcısı, artık büyük yazı tipi indirmeleriyle mücadele etmek için kullanılabilen bir araçtır. Bu CSS özelliği, @font-face bildiriminin içerdiği unicode karakterleri aralığını ayarlar. Bu karakterlerden biri sayfada oluşturulursa, ilgili yazı tipi indirilir. Bu yöntem tüm diller için uygundur. Latin, Yunan veya Kiril karakterleri içeren bir yazı tipi alıp daha küçük alt kümeler oluşturabilirsiniz. Yukarıdaki grafikte, bu karakter kümelerinin üçünü de yüklemeniz gerekseydi 600'den fazla glif olacağını görebilirsiniz.
Bu işlem, web'de Çince, Japonca ve Korece (CJK) yazı tiplerini de etkinleştirir. Yukarıdaki grafikte, bir CJK yazı tipinin, Latin alfabesindeki bir karakterin karakter sayısını 15-20 kat kapsadığını görebilirsiniz. Bu yazı tipleri genellikle çok büyüktür ve bu dillerdeki karakterlerin birçoğu diğerleri kadar sık kullanılmaz.
CSS API ve unicode aralığını kullanmak, dosya aktarımlarını yaklaşık%90 oranında azaltabilir. unicode-range açıklayıcısını kullanarak her bir bölümü ayrı olarak tanımlayabilirsiniz ve her dilim yalnızca içeriğinizde bu karakter aralıklarındaki karakterlerden biri bulunduğunda indirilir.
Örnek: Noto Sans JP dilinde yalnızca "こんちちは" kelimesini ayarlamak istiyorsanız şunları yapabilirsiniz:
- Kendi WOFF2 dosyalarınızı kendiniz barındırın.
- WOFF2'yi almak için CSS API'yi kullanın.
- CSS API'yi, text= parametresi "こんちは" olarak ayarlanmış şekilde kullanın.
Bu örnekte, CSS API'yi kullanarak WOFF2 yazı tipini kendi kendine barındırmaya kıyasla zaten% 97,5 tasarruf ettiğinizi görebilirsiniz.Bunun nedeni, API'nin büyük yazı tiplerini tek kod aralığına ayırmaya yönelik yerleşik desteğidir. Bir adım daha ileri gidip görüntülemek istediğiniz metni tam olarak belirterek yazı tipi boyutunu, kendi barındırdığınız yazı tipinden% 99,9 daha küçük olan CSS API yazı tipinin yalnızca% 95,3'üne indirebilirsiniz.
Google Fonts CSS API, otomatik olarak kullanıcınızın tarayıcısının desteklediği en küçük ve en uyumlu biçimdeki yazı tiplerini yayınlar. Kullanıcınız WOFF2 desteği olan bir tarayıcı kullanıyorsa API, WOFF2'deki yazı tiplerini sağlar; ancak kullanıcı daha eski bir tarayıcı kullanıyorsa API, yazı tiplerini o tarayıcının desteklediği bir biçimde sunar. Her kullanıcının dosya boyutunu küçültmek için API, gerekli olmadığında yazı tiplerindeki verileri de kaldırır. Örneğin, tarayıcılarına ihtiyaç duymayan kullanıcılar için ipucu verileri kaldırılır.
Google Fonts CSS API ile web yazı tiplerinizi geleceğe hazırlama
Google Fonts ekibi ayrıca, WOFF2 gibi web yazı tipi teknolojilerini geliştirmeye devam eden yeni W3C standartlarına da katkıda bulunur. Mevcut projelerden biri olan Artımlı Yazı Tipi Aktarımı, kullanıcıların yazı tipi dosyalarının çok küçük bölümlerini ekranda kullanıldıklarında yüklemelerine ve diğer istek üzerine yayın yapmalarına olanak tanıyarak unicode aralığının performansını geride bırakır. Web Fonts API'mizi kullandığınızda, kullanıcılarınız tarayıcılarında kullanılabilir hale geldiğinde bu temel yazı tipi aktarma teknolojisi iyileştirmelerini alır.
Yazı tipleri API'sinin güzel tarafı şudur: Kullanıcılarınız, web sitenizde herhangi bir değişiklik yapmadan her yeni teknoloji iyileştirmesinden yararlanabilir. Yeni bir web yazı tipi biçimi mi istiyorsunuz? Sorun değil. Yeni tarayıcı veya işletim sistemi desteği mi var? Artık halledilir. Böylece web yazı tiplerinizin bakımıyla uğraşmak yerine kullanıcılarınıza ve içeriğinize odaklanabilirsiniz.
Değişken yazı tipleri desteği yerleşik olarak sunulur
Değişken yazı tipleri, birden çok eksen içinde çeşitli tasarım varyasyonlarını depolayabilen yazı tipi dosyalarıdır. Google Fonts CSS API'sinin yeni sürümünde bunlar için destek sunulur. Fazladan bir varyasyon ekseni eklemek, yazı tipinde yeni bir esneklik sağlar ancak yazı tipi dosyasının boyutunu neredeyse iki katına çıkarabilir.
CSS API isteğinizde daha spesifik olduğunuzda Google Fonts CSS API, kullanıcıların indirme boyutunu küçültmek amacıyla web sitenizde gereken değişken yazı tipinin yalnızca bir kısmını sunabilir. Bu, uzun sayfa yüklenme sürelerine neden olmadan web için değişken yazı tiplerinin kullanılmasını sağlar. Bunu, eksen üzerinde tek bir değer belirterek veya bir aralık belirterek yapabilirsiniz. Hatta tek bir istekte birden çok eksen ve birden çok yazı tipi ailesi belirtebilirsiniz. API, ihtiyaçlarınızı karşılayacak şekilde esnektir.
Uygulanması kolay, sizin için optimize edilmiş
Google Fonts CSS API'yi kullanarak:
- Web tarayıcıları ile daha uyumlu.
- Olabildiğince küçük.
- Hızlı bir şekilde teslim edilir.
- Kullanımı daha kolaydır.
Google Fonts hakkında daha fazla bilgi için fonts.google.com adresini ziyaret edin. CSS API hakkında daha fazla bilgi edinmek için API Dokümanları'nı inceleyin.
Teşekkür
leesehee'nin lokomotif resmi.