Inom webbutveckling ger korrekt användning av typsnittsstil ett attraktivt utseende till applikationen. Dessa teckensnittsstilar ger visuella ledtrådar om dokumentets läsordning. Till exempel måste dokumentrubrikens teckensnittsstil vara fetstil och betydelsefull från andra. Stylingen hjälper också till att skilja viktigt innehåll från andra.
Läranderesultaten av den här artikeln är:
- Vad är Google Web Fonts?
- Hur importerar jag Google Fonts i HTML?
- Hur man använder Google Fonts i CSS-fil?
Vad är Google Web Fonts?
Googles webbteckensnitt är ett bibliotek med öppen källkod som innehåller hundratals teckensnittsstilar eller -familjer. Den tillhandahåller också API:er som hjälper oss att använda webbteckensnitt med Android och CSS. Google Fonts är mycket lättare än andra teckensnittsbibliotek och tillgängliga gratis för företagsanvändning. Dessa är lättare att implementera på vilken webbplats som helst.
Som standard erbjuder CSS fantasy, serif, Sans serif, cursive och monospace teckensnitt. Google Fonts kan användas om du vill använda andra typsnittsstilar.
Hur importerar jag Google Fonts i HTML?
För att använda Google Fonts på en HTML-sida, gå igenom följande steg.
Steg 1: Välj teckensnittsfamiljen
Öppna först Google Fonts officiella webbplats och välj det typsnitt du gillar. Vi har till exempel valt ' Hummer två ' typsnittsfamilj:
Steg 2: Välj stilar
Scrolla sedan ner för att se listan med stilar. Lägg till dem i din samling genom att klicka på ' + ' skylt:
Steg 3: Visa utvalda familjer
För att se de utvalda familjerna, klicka på ikonen som är markerad nedan:
Steg 4: Kopiera länk för att bädda in i HTML
Efter det, scrolla ner och kopiera länken till teckensnittsfamilj med den markerade ' Kopiera '-ikon:
Hur man använder Google Fonts i CSS-filen?
För att använda kopian av Google Fonts i CSS för styling, gå igenom de givna exemplen.
Exempel 1
Inkludera en ' ' element för att ange något innehåll eller stycke:
< sid > “Den bästa tutorialwebbplatsen” sid > För att importera Google Fonts, klistra in den kopierade koden i '
Stil 'p' Element
sid {typsnittsfamilj: 'Hummer två' , kursiv;
text-align: center;
teckenstorlek: 45px;
färg: rgba ( 64 , 3 , 162 , 0,8 ) ;
}
Följande förklarade CSS-egenskaper tillämpas på HTML ' ' tag:
- ' typsnittsfamilj ' tilldelas värdet ' 'Hummer två', kursiv ”. Den här teckensnittsfamiljen är importerad från Google Fonts.
- ' textjustera ” justerar textjusteringen.
- ' textstorlek ” bestämmer teckenstorleken.
- ' Färg ” ställer in teckensnittsfärgen.
Bilden visar att teckensnittsfamiljen har tillämpats framgångsrikt:
Exempel 2
Låt oss ta ett annat exempel för att importera ' Nerko One ' Google teckensnitt. För detta ändamål, klistra återigen in koden för 'Nerko One' Googles teckensnittsadress i '
Stil 'p' Element
sid {typsnittsfamilj: 'Nerko One' , kursiv;
font-weight: 300 ;
teckenstorlek: 30px;
}
den ' typsnittsfamilj ”, “ teckensnittsvikt ', och ' textstorlek ' egenskaper tillämpas på HTML ' ' element.
Produktion
Vi har lärt dig hur du importerar Googles webbteckensnitt i CSS-filen.
Slutsats
För att importera Google Fonts i CSS, besök först Google Fonts officiella webbplats och välj typsnittsstil. Kopiera sedan koden som innehåller ' @importera ' nyckelord och klistra in det i CSS-filen eller i '