Google fontu API pamati - CSS-triki

Anonim

Saite uz CSS failiem

Būtībā jūs tieši sasaistāt tieši ar CSS failiem vietnē Google.com. Izmantojot URL parametrus, jūs precizējat, kādus fontus vēlaties un kādus šo fontu variantus.

…
Ideja: Jūs varat izvairīties no papildu tīkla pieprasījuma, atverot šo stila lapu un nokopējot un ielīmējot @ font-face sīkumus savā galvenajā stila lapā. Bet esiet uzmanīgi: Google veic dažus User Agent šņācējus, lai dažreiz pēc nepieciešamības dažādās ierīcēs pasniegtu dažādas lietas. Jums tas nebūs izdevīgi, ja to darīsit šādā veidā.

CSS

Pēc tam savā CSS jūs varat norādīt šos jaunos fontus pēc nosaukuma jebkuram elementam, kuru vēlaties tos izmantot.

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

FontLoader

Varat izmantot FontLoader JavaScript, nevis saistīt ar CSS. Tam ir priekšrocības, piemēram, Stilēta teksta zibspuldzes (FOUT) kontrolēšana, kā arī trūkumi, piemēram, fakts, ka fonti netiks ielādēti lietotājiem ar izslēgtu JavaScript.

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

Šie klašu nosaukumi, piemēram, .wf-loadingtiek lietoti elementam. Tāpēc ievērojiet, kad fonti tiek “ielādēti”, jūs varat izmantot šo klases nosaukumu, lai paslēptu tekstu. Tad, kad tie tiek parādīti, padariet tos atkal redzamus. Tā tiek kontrolēts FOUT.