I webudvikling giver den korrekte brug af skrifttypestil applikationen et attraktivt udseende. Disse skrifttyper giver visuelle fingerpeg om dokumentets læserækkefølge. For eksempel skal dokumentoverskriftens skrifttype være fed og betydningsfuld fra andre. Stylingen er også med til at skelne vigtigt indhold fra andet.
Læringsresultaterne af denne artikel er:
- Hvad er Google Web Fonts?
- Hvordan importerer jeg Google-skrifttyper i HTML?
- Hvordan bruger man Google Fonts i CSS-fil?
Hvad er Google Web Fonts?
Google webskrifttype er et open source-bibliotek, der indeholder hundredvis af skrifttypestile eller -familier. Det giver også API'er, der hjælper os med at bruge webskrifttyper med Android og CSS. Google Fonts er meget lettere end andre skrifttypebiblioteker og tilgængelige gratis til erhvervsbrug. Disse er nemmere at implementere på enhver hjemmeside.
Som standard tilbyder CSS fantasy, serif, Sans serif, cursive og monospace skrifttyper. Google Fonts kan bruges, hvis du kan lide at bruge nogle andre skrifttyper.
Hvordan importerer jeg Google-skrifttyper i HTML?
For at bruge Google Fonts på en HTML-side skal du gennemgå følgende trin.
Trin 1: Vælg skrifttypefamilien
Åbn først Google skrifttyper officielle hjemmeside og vælg den skrifttype, du kan lide. For eksempel har vi valgt ' Hummer to ' skrifttype-familie:
Trin 2: Vælg stilarterne
Rul derefter ned for at se listen over stilarter. Tilføj dem til din samling ved at klikke på ' + ' skilt:
Trin 3: Se udvalgte familier
For at se de udvalgte familier, klik på ikonet fremhævet nedenfor:
Trin 4: Kopiér link til indlejring i HTML
Rul derefter ned og kopier linket til font-familien ved at bruge det fremhævede ' Kopi ' ikon:
Hvordan bruger man Google-skrifttyper i CSS-filen?
For at bruge kopien af Google Fonts i CSS til styling skal du gennemgå de givne eksempler.
Eksempel 1
Inkluder en ' ' element for at specificere noget indhold eller afsnit:
< s > “Den bedste tutorial hjemmeside” s > For at importere Google Fonts skal du indsætte den kopierede kode i '
Stil 'p' Element
s {skrifttype-familie: 'Lobster Two' , kursiv;
tekst-align: center;
skriftstørrelse: 45px;
farve: rgba ( 64 , 3 , 162 , 0,8 ) ;
}
Følgende forklarede CSS-egenskaber anvendes på HTML ' ' tag:
- “ skrifttype-familie ' er tildelt værdien ' 'Hummer to', kursiv '. Denne skrifttypefamilie er importeret fra Google Fonts.
- “ tekstjustering ” justerer tekstjusteringen.
- “ skriftstørrelse ” bestemmer skriftstørrelsen.
- “ farve ” indstiller skriftfarven.
Billedet viser, at skrifttypefamilien er blevet anvendt med succes:
Eksempel 2
Lad os tage et andet eksempel for at importere ' Nerko One ' Google skrifttype. Til dette formål skal du igen indsætte koden for 'Nerko One' Google-skrifttype-URL i '
Stil 'p' Element
s {skrifttype-familie: 'Nerko One' , kursiv;
skrifttype-vægt: 300 ;
skriftstørrelse: 30px;
}
Det ' skrifttype-familie ', ' skrifttype-vægt ', og ' skriftstørrelse ' egenskaber anvendes på HTML ' ' element.
Produktion
Vi har lært dig, hvordan du importerer Google-webskrifttyper i CSS-filen.
Konklusion
For at importere Google Fonts i CSS skal du først besøge Google skrifttyper officielle hjemmeside og vælg skrifttypestilen. Kopier derefter koden, der indeholder ' @importere ' søgeord og indsæt det i CSS-filen eller i '