Google Yazı Tipi API'sinin Temelleri - CSS Hileleri

Anonim

CSS dosyalarına bağlantı

Esasen doğrudan Google.com'daki CSS dosyalarına bağlantı kurarsınız. URL parametreleri sayesinde, hangi yazı tiplerini istediğinizi ve bu yazı tiplerinin hangi varyasyonlarını belirlersiniz.

…
Fikir: Bu stil sayfasını açarak ve @ font-face öğelerini ana stil sayfanıza kopyalayıp yapıştırarak fazladan bir ağ isteğinden kaçınabilirsiniz. Ancak dikkat: Google, gerektiğinde farklı cihazlara bazen farklı şeyler sunmak için bazı Kullanıcı Aracısı koklama yapar. Bu şekilde yapılırsa bundan faydalanamazsınız.

CSS

CSS'nizde, bu yeni yazı tiplerini, kullanmak istediğiniz herhangi bir öğe üzerinde isimleriyle belirtebilirsiniz.

body ( font-family: 'Tangerine', 'Inconsolata', 'Droid Sans', serif; font-size: 48px; )

FontLoader

CSS'ye bağlanmak yerine FontLoader JavaScript'i kullanabilirsiniz. Flash of Unstyled Text (FOUT) gibi avantajları ve JavaScript kapalı olan kullanıcılar için yazı tiplerinin yüklenmemesi gibi dezavantajları vardır.

 WebFont.load(( google: ( families: ('Cantarell') ) )); .wf-loading h1 ( visibility: hidden; ) .wf-active h1, .wf-inactive h1 ( visibility: visible; font-family: 'Cantarell'; )

Bu sınıf isimleri, örneğin öğeye .wf-loadinguygulanır . Yazı tipleri "yüklendiğinde", metni gizlemek için bu sınıf adını kullanabilirsiniz. Sonra gösterildiklerinde, onları tekrar görünür hale getirin. FOUT bu şekilde kontrol edilir.