CSS lettertipe grootte
Skrifgrootte
Die font-sizeeiendom stel die grootte van die teks.
Om die teksgrootte te kan bestuur, is belangrik in webontwerp. Jy moet egter nie lettergrootte-aanpassings gebruik om paragrawe soos opskrifte te laat lyk, of opskrifte soos paragrawe te laat lyk nie.
Gebruik altyd die regte HTML-merkers, soos <h1> - <h6> vir opskrifte en <p> vir paragrawe.
Die lettergrootte-waarde kan 'n absolute of relatiewe grootte wees.
Absolute grootte:
- Stel die teks op 'n gespesifiseerde grootte
- Laat nie 'n gebruiker toe om die teksgrootte in alle blaaiers te verander nie (sleg om toeganklikheidsredes)
- Absolute grootte is nuttig wanneer die fisiese grootte van die uitset bekend is
Relatiewe grootte:
- Stel die grootte relatief tot omliggende elemente
- Laat 'n gebruiker toe om die teksgrootte in blaaiers te verander
Let wel: As jy nie 'n lettergrootte spesifiseer nie, is die verstekgrootte vir normale teks, soos paragrawe, 16px (16px=1em).
Stel lettergrootte met pixels in
Deur die teksgrootte met pixels te stel, gee jy volle beheer oor die teksgrootte:
Voorbeeld
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 14px;
}
Wenk: As jy piksels gebruik, kan jy steeds die zoemnutsding gebruik om die hele bladsy te verander.
Stel lettergrootte met Em
Om gebruikers toe te laat om die grootte van die teks (in die blaaierkieslys) te verander, gebruik baie ontwikkelaars hulle in plaas van pixels.
1em is gelyk aan die huidige lettergrootte. Die verstek teksgrootte in blaaiers is 16px. Dus, die verstekgrootte van 1em is 16px.
Die grootte kan van pixels tot em bereken word deur hierdie formule te gebruik: pixels /16= em
Voorbeeld
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
}
In die voorbeeld hierbo is die teksgrootte in em dieselfde as die vorige voorbeeld in pixels. Met die em-grootte is dit egter moontlik om die teksgrootte in alle blaaiers aan te pas.
Ongelukkig is daar steeds 'n probleem met ouer weergawes van Internet Explorer. Die teks word groter as wat dit moet wanneer dit groter gemaak word, en kleiner as wat dit moet wanneer dit kleiner gemaak word.
Gebruik 'n kombinasie van persentasie en em
Die oplossing wat in alle blaaiers werk, is om 'n verstek lettergrootte in persentasie vir die <body> element in te stel:
Voorbeeld
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
}
Ons kode werk nou uitstekend! Dit wys dieselfde teksgrootte in alle blaaiers, en laat alle blaaiers toe om die teks in te zoem of te verander!
Responsiewe lettertipegrootte
Die teksgrootte kan met 'n vweenheid gestel word, wat die "kykpoortwydte" beteken.
Op hierdie manier sal die teksgrootte die grootte van die blaaiervenster volg:
Hello Wêreld
Verander die grootte van die blaaiervenster om te sien hoe die lettergrootte skaal.
Voorbeeld
<h1 style="font-size:10vw">Hello World</h1>
Viewport is die grootte van die blaaiervenster. 1vw = 1% van kykpoortwydte. As die uitsigpoort 50 cm breed is, is 1vw 0,5 cm.