Yıllar geçtikçe, çok şey değişti web yazı tipleri teknoloji. Eskiden bir metin görüntüsü veya bir Flaş eklenti (ve web sitenizin arama motoru optimizasyonunu tehlikeye atan) artık web’de standart bir uygulamadır. Bir zamanlar, sayfa yüklenmeden önce, kullanmamış olabileceğiniz stiller ve karakterlerle tüm bir yazı tipini yüklemek zorundaydınız, ancak bu bile geçmişte kaldı.
bu Google Yazı Tipleri CSS API’sı ayrıca web yazı tipi teknolojisindeki değişikliklere ayak uydurmak için yıllar içinde gelişmiştir. Tarayıcınızın API’yi kullanan tüm web sitelerinde yaygın olarak kullanılan yazı tiplerini önbelleğe almasına izin vererek web’i daha hızlı hale getirmek için orijinal değer önermesinden çok uzun bir yol kat etti. Bu artık doğru değilancak API yine de web sitelerinin hızlı yüklenmesi ve yazı tiplerinin iyi çalışması için ek ve önemli optimizasyonlar sağlar.
Web siteniz, Google Fonts CSS API’sini kullanarak CSS yükleme süresini minimumda tutmak için yalnızca ihtiyaç duyduğu yazı tipi verilerini isteyebilir ve bu da web sitenizin ziyaretçilerinin içeriğinizi mümkün olan en kısa sürede yüklemesini sağlar. API, her isteğe o web tarayıcısı için en iyi yazı tipiyle yanıt verecektir.
Tüm bunlar, kodunuza tek bir HTML satırı ekleyerek gerçekleşir.
Google Yazı Tipleri CSS API’sı nasıl kullanılır? #
bu Google Fonts CSS API belgeleri güzel özetliyor:
Herhangi bir programlama yapmanıza gerek yoktur; tek yapmanız gereken HTML belgenize özel bir stil sayfası bağlantısı eklemek ve ardından yazı tipine bir CSS stilinde başvurmak.
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 bir yazı tipi istediğinde, hangi aileyi veya aileleri istediğinizi ve isteğe bağlı olarak ağırlıklarını, stillerini, alt kümelerini ve diğer birçok seçenek. API daha sonra isteğinizi iki yoldan biriyle işleyecektir:
- İsteğiniz, API’nin zaten dosyalarına sahip olduğu ortak parametreleri kullanıyorsa, kullanıcılarınızı bu dosyalara yönlendirerek hemen CSS’yi döndürür.
- API’nin şu anda önbelleğe almadığı parametrelere sahip bir yazı tipi talep ettiyseniz, yazı tiplerinizi anında alt gruplara ayıracaktır. HarfBuzz hızlı bir şekilde yapmak ve CSS’yi onlara işaret ederek döndürmek için.
Yazı tipi dosyaları büyük olabilir, ancak büyük olmaları gerekmez. #
Web yazı tipleri büyük olabilir; bu doğru. Sadece tek bir ağırlık Noto Sans Japonca WOFF2’de neredeyse 3,4 MB’dir ve bunu kullanıcılarınızın her birine indirmek, sayfa yükleme sürenizi kısaltır. Her milisaniyenin önemli olduğu ve her baytın değerli olduğu durumlarda, yalnızca kullanıcılarınızın ihtiyaç duyduğu verileri yüklediğinizden emin olmak istersiniz.
Google Fonts CSS API, 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ümeler olarak adlandırılır) oluşturabilir. Tüm bir yazı tipini sunmak yerine, kullanarak belirli karakterleri isteyebilirsiniz. text parametre.
link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap&text=RobtMn" rel="stylesheet" />
CSS API ayrıca kullanıcılarınıza herhangi bir API parametresi olmadan otomatik olarak ek web yazı tipi optimizasyonları sağlar. API, kullanıcılarınıza CSS dosyaları sunacaktır. looking_for_font-face/unicode-range" rel="noopener">unicode-range zaten etkin (web tarayıcıları tarafından destekleniyorsa), böylece yalnızca web sitenizin ihtiyaç duyduğu belirli karakterler için yazı tiplerini yüklerler.
Unicode aralığı CSS tanımlayıcısı, artık büyük yazı tipi indirmeleriyle mücadele etmek için kullanılabilecek bir araçtır. Bu CSS özelliği, bir dizi unicode karakter ayarlar. looking_for_font-face deklarasyon içerir. Bu karakterlerden biri sayfada işlenirse, o yazı tipi indirilir. Bu, tüm dil türleri için iyi çalışır, böylece Latin, Yunanca veya Kiril karakterleri içeren bir yazı tipi alıp daha küçük alt kümeler oluşturabilirsiniz. Önceki çizelgede, bu karakter setlerinin üçünü de yüklemek zorunda kalsaydınız, bunun 600’den fazla glif olacağını görebilirsiniz.
Bu da sağlar Çince, Japonca ve Korece (CJK) yazı tipleri web için. Yukarıdaki grafikte, bir CJK yazı tipinin, Latin karakterli bir yazı tipinin kapsadığı karakter sayısının 15-20 katını kapsadığını görebilirsiniz. Bu yazı tipleri tipik olarak çok büyüktür ve bu dillerdeki karakterlerin çoğu diğerleri kadar sık kullanılmaz.
CSS API’sini ve unicode aralığını kullanmak, dosya aktarımlarını şu şekilde azaltabilir: yaklaşık %90. Kullanmak unicode-range tanımlayıcı, her bölümü ayrı ayrı tanımlayabilirsiniz ve her dilim yalnızca içeriğiniz bu karakter aralıklarındaki karakterlerden birini içerdiğinde indirilir.
Örnek: Yalnızca ” kelimesini ayarlamak istiyorsanızMerhaba” içinde JP’siz Notoyapabilirdin:
- Kendi WOFF2 dosyalarınızı kendiniz barındırın.
- WOFF2’yi almak için CSS API’sini kullanın.
- text= parametresi “Merhaba” olarak ayarlanmış olarak CSS API’sini kullanın.
Bu örnekte, API’nin büyük yazı tiplerini unicode aralığına ayırmaya yönelik yerleşik desteği sayesinde, CSS API’sini kullanarak WOFF2 yazı tipini kendi kendine barındırmaya göre şimdiden %97,5 tasarruf ettiğinizi görebilirsiniz. Bir adım daha ileri giderek ve tam olarak görüntülemek istediğiniz metni belirterek, yazı tipi boyutunu CSS API yazı tipinin yalnızca %95,3’üne, yani kendi kendine barındırılan yazı tipinden %99,9 daha küçük olacak şekilde azaltabilirsiniz.
Google Fonts CSS API, yazı tiplerini kullanıcınızın tarayıcısı tarafından desteklenen en küçük ve en uyumlu biçimde otomatik olarak sunar. Kullanıcınız WOFF2 destekli bir tarayıcı kullanıyorsa, API yazı tiplerini WOFF2’de sağlayacaktır, ancak daha eski bir tarayıcı kullanıyorsa, API yazı tiplerini o tarayıcı tarafından desteklenen bir biçimde sunacaktır. API, her kullanıcının dosya boyutunu azaltmak için ihtiyaç olmadığında yazı tiplerinden verileri de kaldırır. Örneğin, tarayıcıları buna ihtiyaç duymayan kullanıcılar için ipucu verileri kaldırılacaktır.
Google Fonts CSS API ile web yazı tiplerinizi geleceğe hazırlama #
Google Yazı Tipleri ekibi, aşağıdakiler gibi web yazı tipi teknolojilerini yenilemeye devam eden yeni W3C standartlarına da katkıda bulunur: WOFF2. Mevcut bir proje Artımlı Yazı Tipi Transferi, kullanıcıların yazı tipi dosyalarının çok küçük bölümlerini ekranda kullanıldıkça yüklemelerine ve geri kalanını talep üzerine akışa almalarına olanak tanıyarak unicode aralığının performansını aşar. Web yazı tipleri API’mizi kullandığınızda, kullanıcılarınız bu temel yazı tipi aktarım teknolojisi geliştirmelerini tarayıcılarında kullanılabilir hale geldiklerinde alırlar.
Bu, bir yazı tipi API’sinin güzelliğidir: kullanıcılarınız, web sitenizde herhangi bir değişiklik yapmadan her yeni teknoloji geliştirmesinden yararlanır. Yeni web yazı tipi formatı? Sorun değil. Yeni tarayıcı veya işletim sistemi desteği? Bakımı yapıldı. Böylece, web yazı tiplerinizin bakımıyla uğraşmak yerine, kullanıcılarınıza ve içeriğinize odaklanmakta özgürsünüz.
Yerleşik değişken yazı tipleri desteği #
Değişken yazı tipleri birden fazla arasında bir dizi tasarım varyasyonunu saklayabilen yazı tipi dosyalarıdır. baltalarve Yeni sürüm Google Yazı Tipleri CSS API’si, onlar için destek içerir. Ek bir varyasyon ekseni eklemek, bir yazı tipiyle yeni 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 azaltmak için web sitenizin ihtiyaç duyduğu değişken yazı tipinin yalnızca bir kısmını sunabilir. Bu, uzun sayfa yükleme süreleri olmadan web için değişken yazı tiplerinin kullanılmasını sağlar. Bunu, bir eksen üzerinde tek bir değer belirterek veya bir aralık belirleyerek yapabilirsiniz; hatta hepsi tek bir istekte birden çok eksen ve birden çok yazı tipi ailesi belirtebilirsiniz. API ihtiyaçlarınızı karşılamak için esnektir.
Uygulaması basit, sizin için optimize edilmiş #
Google Yazı Tipleri CSS API’si, şu özelliklere sahip yazı tiplerini sunmanıza yardımcı olur:
- Web tarayıcıları ile daha uyumlu.
- Mümkün olduğu kadar küçük.
- Hızlı bir şekilde teslim edildi.
- Kullanmanız daha kolay.
Google Yazı Tipleri hakkında daha fazla bilgi için şu adresi ziyaret edin: fonts.google.com.tr. CSS API hakkında daha fazla bilgi edinmek için API Belgeleri.
teşekkürler #
Kahraman görseli leesehee.