CSS Google Fonts
Google Fonts
As jy nie enige van die standaard fonts in HTML wil gebruik nie, kan jy Google Fonts gebruik.
Google Fonts is gratis om te gebruik, en het meer as 1000 lettertipes om van te kies.
Hoe om Google Fonts te gebruik
Voeg net 'n spesiale stylbladskakel by in die <head>-afdeling en verwys dan na die lettertipe in die CSS.
Voorbeeld
Hier wil ons 'n lettertipe genaamd "Sofia" van Google Fonts gebruik:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
}
</style>
</head>
Resultaat:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Voorbeeld
Hier wil ons 'n lettertipe met die naam "Trirong" van Google Fonts gebruik:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Trirong">
<style>
body {
font-family: "Trirong", serif;
}
</style>
</head>
Resultaat:
Trirong Font
Lorem ipsum dolor sit amet.
123456790
Voorbeeld
Hier wil ons 'n lettertipe genaamd "Audiowide" van Google Fonts gebruik:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide">
<style>
body {
font-family: "Audiowide", sans-serif;
}
</style>
</head>
Resultaat:
Audiowide Font
Lorem ipsum dolor sit amet.
123456790
Let wel: Wanneer 'n lettertipe in CSS gespesifiseer word, lys altyd ten minste een terugvalfont (om onverwagte gedrag te vermy). So, ook hier moet jy 'n generiese fontfamilie (soos serif of sans-serif) aan die einde van die lys byvoeg.
Vir 'n lys van alle beskikbare Google Fonts, besoek ons Hoe om - Google Fonts Tutoriaal .
Gebruik veelvuldige Google-lettertipes
Om veelvuldige Google-fonts te gebruik, skei net die fontname met 'n pypkarakter ( |), soos volg:
Voorbeeld
Versoek veelvuldige lettertipes:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Audiowide|Sofia|Trirong">
<style>
h1.a {font-family: "Audiowide", sans-serif;}
h1.b {font-family: "Sofia",
sans-serif;}
h1.c {font-family: "Trirong", serif;}
</style>
</head>
Resultaat:
Audiowide Font
Sofia Font
Trirong Font
Let wel: As jy veelvuldige lettertipes versoek, kan dit jou webblaaie vertraag! Wees dus versigtig daarvoor.
Stilering van Google-lettertipes
Natuurlik kan jy Google Fonts styl soos jy wil, met CSS!
Voorbeeld
Stileer die "Sofia"-lettertipe:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
text-shadow: 3px 3px 3px #ababab;
}
</style>
</head>
Resultaat:
Sofia Font
Lorem ipsum dolor sit amet.
123456790
Aktiveer lettertipe-effekte
Google het ook verskillende font-effekte geaktiveer wat jy kan gebruik.
Voeg eers by die Google API, voeg dan 'n spesiale klasnaam by die element wat die spesiale effek gaan gebruik. Die klasnaam begin altyd met
en eindig met die .effect=effectnamefont-effect-effectname
Voorbeeld
Voeg die vuur-effek by die "Sofia"-font:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=fire">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-fire">Sofia on
Fire</h1>
</body>
Resultaat:
Sofia on Fire
Om veelvuldige lettertipe-effekte aan te vra, skei net die effekname met 'n pypkarakter ( |), soos volg:
Voorbeeld
Voeg veelvuldige effekte by die "Sofia"-font:
<head>
<link rel="stylesheet"
href="https://fonts.googleapis.com/css?family=Sofia&effect=neon|outline|emboss|shadow-multiple">
<style>
body {
font-family: "Sofia", sans-serif;
font-size: 30px;
}
</style>
</head>
<body>
<h1 class="font-effect-neon">Neon Effect</h1>
<h1 class="font-effect-outline">Outline
Effect</h1>
<h1 class="font-effect-emboss">Emboss
Effect</h1>
<h1 class="font-effect-shadow-multiple">Multiple
Shadow Effect</h1>
</body>
Resultaat:
Neon Effect
Outline Effect
Emboss Effect
Multiple Shadow Effect