I webutvikling gir riktig bruk av skriftstiling et attraktivt utseende til applikasjonen. Disse skriftstilene gir visuelle ledetråder om dokumentets leserekkefølge. For eksempel må dokumentoverskriftens skriftstil være fet og signifikant fra andre. Stylingen er også med på å skille viktig innhold fra andre.
Læringsutbyttet av denne artikkelen er:
- Hva er Google Web Fonts?
- Hvordan importere Google Fonts i HTML?
- Hvordan bruke Google Fonts i CSS-fil?
Hva er Google Web Fonts?
Google webfont er et åpen kildekode-bibliotek som inneholder hundrevis av skriftstiler eller familier. Den gir også APIer som hjelper oss å bruke nettfonter med Android og CSS. Google Fonts er mye lettere enn andre skriftbibliotek og tilgjengelig gratis for forretningsbruk. Disse er enklere å implementere på alle nettsider.
Som standard tilbyr CSS fantasy, serif, Sans serif, kursiv og monospace skriftstiler. Google Fonts kan brukes hvis du liker å bruke andre skriftstiler.
Hvordan importere Google Fonts i HTML?
For å bruke Google Fonts på en HTML-side, gå gjennom følgende trinn.
Trinn 1: Velg skriftfamilien
Først åpner du Google Fonts offisiell nettside og velg fonten du liker. For eksempel har vi valgt ' Hummer to ' font-familie:
Trinn 2: Velg stilene
Deretter ruller du ned for å se listen over stiler. Legg dem til samlingen din ved å klikke på ' + ' tegn:
Trinn 3: Se utvalgte familier
For å se de valgte familiene, klikk på ikonet som er uthevet nedenfor:
Trinn 4: Kopier koblingen for å bygge inn i HTML-en
Rull deretter ned og kopier koblingen til font-familien ved å bruke den uthevede ' Kopiere ' ikon:
Hvordan bruke Google Fonts i CSS-filen?
For å bruke kopien av Google Fonts i CSS for styling, gå gjennom de gitte eksemplene.
Eksempel 1
Ta med en ' ' element for å spesifisere noe innhold eller avsnitt:
< s > “Det beste opplæringsnettstedet” s > For å importere Google Fonts, lim inn den kopierte koden i '
Stil 'p' Element
s {font-familie: 'Hummer to' , kursiv;
tekst-align: center;
skriftstørrelse: 45px;
farge: rgba ( 64 , 3 , 162 , 0,8 ) ;
}
Følgende forklarte CSS-egenskaper brukes på HTML ' ' stikkord:
- ' font-familie ' er tildelt verdien ' 'Hummer to', kursiv '. Denne skriftfamilien er importert fra Google Fonts.
- ' tekstjustering ” justerer tekstjusteringen.
- ' skriftstørrelse ” bestemmer skriftstørrelsen.
- ' farge ' angir skriftfargen.
Bildet viser at skriftfamilien er vellykket brukt:
Eksempel 2
La oss ta et annet eksempel for å importere ' Nerko One ' Google font. For dette formålet, lim igjen koden for 'Nerko One' Google font URL i '
Stil 'p' Element
s {font-familie: 'Nerko One' , kursiv;
font-vekt: 300 ;
skriftstørrelse: 30px;
}
« font-familie ', ' font-vekt ', og ' skriftstørrelse ' egenskaper brukes på HTML ' ' element.
Produksjon
Vi har lært deg hvordan du importerer Google-nettfonter i CSS-filen.
Konklusjon
For å importere Google Fonts i CSS, gå først til Google Fonts offisiell nettside og velg skriftstil. Deretter kopierer du koden som inneholder ' @import ' nøkkelord og lim det inn i CSS-filen eller i '