Bij webontwikkeling zorgt het juiste gebruik van lettertypestijlen voor een aantrekkelijk uiterlijk van de applicatie. Deze lettertypestijlen geven visuele aanwijzingen over de leesvolgorde van het document. De lettertypestijl van de documentkop moet bijvoorbeeld vet en duidelijk zijn ten opzichte van anderen. De styling helpt ook om belangrijke inhoud van andere te onderscheiden.
De leerresultaten van dit artikel zijn:
- Wat zijn Google Web Fonts?
- Hoe Google-lettertypen in HTML importeren?
- Hoe Google Fonts gebruiken in CSS-bestand?
Wat zijn Google Web Fonts?
Google-weblettertype is een open-sourcebibliotheek die honderden lettertypestijlen of -families bevat. Het biedt ook API's die ons helpen om weblettertypen te gebruiken met Android en CSS. Google Fonts zijn veel lichter dan andere lettertypebibliotheken en gratis beschikbaar voor zakelijk gebruik. Deze zijn gemakkelijker te implementeren op elke website.
Standaard biedt CSS fantasie-, serif-, sans-serif-, cursieve en monospace-lettertypestijlen. Google Fonts kan worden gebruikt als u andere lettertypestijlen wilt gebruiken.
Hoe Google-lettertypen in HTML importeren?
Om Google Fonts op een HTML-pagina te gebruiken, doorloopt u de volgende stappen.
Stap 1: Selecteer de lettertypefamilie
Open eerst de Google-lettertypen officiële website en selecteer het gewenste lettertype. Zo hebben we gekozen voor de “ Kreeft Twee ” font-familie:
Stap 2: Selecteer de stijlen
Blader vervolgens naar beneden om de lijst met stijlen te bekijken. Voeg ze toe aan je verzameling door te klikken op de ' + ' teken:
Stap 3: Bekijk geselecteerde gezinnen
Om de geselecteerde families te bekijken, klikt u op het hieronder gemarkeerde pictogram:
Stap 4: Link kopiëren om in te sluiten in de HTML
Scroll daarna naar beneden en kopieer de link van font-family met behulp van de gemarkeerde ' Kopiëren ' icoon:
Hoe gebruik ik Google Fonts in het CSS-bestand?
Om de kopie van Google Fonts in CSS te gebruiken voor styling, doorloop je de gegeven voorbeelden.
voorbeeld 1
Voeg een ' ” element om wat inhoud of paragraaf te specificeren:
< p > “De beste zelfstudiewebsite” p > Om de Google Fonts te importeren, plakt u de gekopieerde code in de '
Stijl 'p' -element
p {font-familie: 'Kreeft Twee' , cursief;
tekst uitlijnen: centreren;
lettergrootte: 45px;
kleur: rgb ( 64 , 3 , 162 , 0,8 ) ;
}
De volgende uitgelegde CSS-eigenschappen worden toegepast op de HTML ' ' label:
- “ font-familie ” is toegewezen met de waarde “ 'Kreeft Twee', cursief ”. Deze lettertypefamilie is geïmporteerd uit Google Fonts.
- “ tekst uitlijnen ” past de tekstuitlijning aan.
- “ lettertypegrootte ” bepaalt de lettergrootte.
- “ kleur ” stelt de letterkleur in.
De afbeelding laat zien dat de lettertypefamilie met succes is toegepast:
Voorbeeld 2
Laten we nog een voorbeeld nemen om de ' Nerko Een 'Google-lettertype. Plak hiervoor opnieuw de code voor 'Nerko One' Google-lettertype-URL in de '
Stijl 'p' -element
p {font-familie: 'Nerko Een' , cursief;
lettertype dikte: 300 ;
lettergrootte: 30px;
}
De ' font-familie ”, “ lettertype dikte ', en ' lettertypegrootte ' eigenschappen worden toegepast op de HTML ' ”-element.
Uitgang
We hebben u geleerd hoe u Google-weblettertypen in het CSS-bestand kunt importeren.
Gevolgtrekking
Om Google Fonts in CSS te importeren, gaat u eerst naar de Google-lettertypen officiële website en selecteer de letterstijl. Kopieer vervolgens de code die de ' @importeren ' trefwoord en plak het in het CSS-bestand of in de '