„Google Font API“ pagrindai - CSS-gudrybės

Nuoroda į CSS failus

Iš esmės jūs tiesiogiai susiejate tiesiai su CSS failais Google.com. Per URL parametrus nurodote, kuriuos šriftus norite ir kokius tų šriftų variantus.

… 

Idėja: galite išvengti papildomos tinklo užklausos atidarydami tą stiliaus lapą ir nukopijuodami ir įklijuodami „@ font-face“ medžiagą į savo pagrindinį stiliaus lapą. Tačiau saugokitės: „Google“ naudojasi kai kuriais „User Agent“ kvapais, kad prireikus skirtingiems įrenginiams kartais patiektų skirtingus dalykus. Jums nebus naudinga, jei taip elgsitės.

CSS

Tada savo CSS galite nurodyti šiuos naujus šriftus pagal pavadinimą bet kuriame elemente, kurį norite naudoti.

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

„FontLoader“

Užuot susieję su CSS, galite naudoti „FontLoader JavaScript“. Tai turi privalumų, pvz., „Stilizuoto teksto„ Flash “valdymas (FOUT), taip pat trūkumų, pavyzdžiui, tai, kad šriftai nebus įkeliami vartotojams, kurių„ JavaScript “išjungta.

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

Tie klasių pavadinimai, pvz., .wf-loadingPritaikomi elementui. Taigi atkreipkite dėmesį, kai šriftai „įkeliami“, galite naudoti tą klasės pavadinimą, kad paslėptumėte tekstą. Tada, kai jie bus rodomi, padarykite juos vėl matomus. Taip kontroliuojamas FOUT.