A font-sizetulajdonság megadja a betűtípus méretét vagy magasságát. font-sizenem csak a betűtípust érinti, amelyre alkalmazzák, hanem az em, rem és ex hosszúsági egységek értékének kiszámításához is felhasználja.
p ( font-size: 20px; )font-sizekulcsszavakat, hosszegységeket vagy százalékokat fogadhat el értékként. Fontos azonban megjegyezni, hogy amikor ezt a fontgyorsírás tulajdonságának részeként deklarálják , font-sizeakkor kötelező érték. Ha nem szerepel a gyorsírásban, akkor az egész sort figyelmen kívül hagyja.
Az alkalmazott hosszértékek (pl. Px, em, rem, ex stb.) font-sizeNem lehetnek negatívak.
Abszolút kulcsszavak és értékek
.element ( font-size: small; )A következő abszolút kulcsszóértékeket fogadja el:
xx-smallx-smallsmallmediumlargex-largexx-large
Ezek az abszolút értékek a böngésző által kiszámított meghatározott betűméretekhez vannak hozzárendelve. De használhat két kulcsszóértéket is, amelyek a szülőelem betűméretéhez viszonyulnak.
További abszolút értékek: mm(milliméter), cm(centiméter), in(hüvelyk), pt(pont) és pc(pica). Egy pont megegyezik a hüvelyk 1/72 hüvelykével, míg egy kép értéke 12 ponttal egyenlő - ezeket az értékeket általában a nyomtatott dokumentumokhoz használják.
Relatív kulcsszavak
.element ( font-size: larger; )largersmaller
Például, ha a szülő elem betűmérete a következő small, akkor egy meghatározott viszonylagos nagyságú gyermekelem largera betűméretet megegyezik mediuma gyermekelem betűméretével .
Százalékos értékek
.element ( font-size: 110%; )A százalékos értékek, például a 110% -os betűméret beállítása, szintén viszonyulnak a szülő elem betűméretéhez, amint azt az alábbi bemutató mutatja:
Lásd a CSS-Tricks (@ css-tricks) toll qdbELL-jét a CodePen-en.
Az em egység
.element ( font-size: 2em; )Az em egység egy relatív egység, amely a szülőelem betűméretének kiszámított értékén alapul. Ez azt jelenti, hogy a gyermekelemek mindig a szüleiktől függenek a betűméret beállításában. Például:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )A fenti példában a bekezdés betűmérete 16 képpont lesz, mivel 1 x 16 = 16 képpont, míg a fejléc 32 képpontos lesz, mert 2 x 16 = 32 képpont. A felosztás méretezésének számos előnye van, a szülőelem betűméretétől függően, nevezetesen be tudjuk csomagolni az elemeket egy konténerbe, és tudjuk, hogy az összes gyermek mindig viszonyul egymáshoz:
Lásd a Toll, amelyből kiderül, hogyan működik az em egység CSS-Tricks (@ css-tricks) segítségével a CodePen-en.
A rem egység
A rem egységek esetében azonban a betűméret a gyökér elem (vagy az htmlelem) értékétől függ .
html ( font-size: 16px; ) p ( font-size: 1.5rem; )A fenti példában a rem egység egyenlő 16px-szel (mivel a html/ root elemtől öröklődik ), és így az összes bekezdéselem betűmérete 24px-re lesz kiszámítva (1,5 x 16 = 24). Az em egységekkel ellentétben a bekezdés figyelmen kívül hagyja az összes szülő stílusát a gyökér mellett.
Ezt az egységet a következő böngészők támogatják:
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| Művek | Művek | Művek | Művek | 10+ | Művek | Művek |
Az ex egység
.element ( font-size: 20ex; )Ex egységek esetén az 1ex egyenlő lenne a gyökérelem x kisbetűjének kiszámított magasságával. Tehát az alábbi példában az htmlelem értéke:, 20pxés az összes többi betűméretet az adott betű x-magassága határozza meg.
Lásd a tollat, hogy kiderüljön, hogyan működik az ex egység CSS-Tricks (@ css-tricks) segítségével a CodePen-en.
Kísérletezzen a fenti demóval, hogy kicseréljem az font-familyon htmlelemet, hogy lássuk, hogyan változnak a többi betűméret.
Nézetablakok
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )A nézetablak-egységek, például a vwés vh, állítják be az elem betűméretét a nézetablak méreteihez képest:
- 1vw = a nézetablak szélességének 1% -a
- 1vh = a nézetablak magasságának 1% -a
Tehát ha a következő példát vesszük:
.element ( font-size: 100vh; )Akkor ez azt állítja, hogy az elem betűméretének mindig a nézet magasságának 100% -ának kell lennie (50vh 50%, 15vh 15% stb.). Az alábbi bemutatóban próbálja átméretezni a példa magasságát, hogy megnézze a típus nyújtását:
Lásd a CSS-Tricks (@ css-tricks) által a CSS-Tricks (@ css-tricks) által készített tollméret típusát vh egységekkel
vw Az egységek abban különböznek egymástól, hogy a betűformák magasságát a nézet szélességével határozza meg, ezért az alábbi bemutatóban vízszintesen át kell méreteznie a böngészőablakot a változások megtekintéséhez:
Nézze meg a CSS-Tricks (@ css-tricks) által a CSS-Tricks (@ css-tricks) tollméret-típusát vw egységekkel.
Ezeket az egységeket a következő böngészők támogatják:
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
Fontos megjegyezni, hogy két másik nézetablak van: vminés vmax. Az első megtalálja a és értékét, vhés vwa betűméretet állítja a legkisebb közé, míg vmaxa betűméretet a két érték közül a legnagyobbra állítja.
A ch egység
.element ( font-size: 24ch; )Az chegység exannyiban hasonlít az egységhez, hogy megadja az elem betűméretét a betűtípus 0 (nulla) karakterjelének szélességéhez viszonyítva:
Nézze meg a CSS-Tricks (@ css-tricks) tollméret típusát ch egységekkel a CodePen-en.
Ezt az egységet támogatja:
| Króm | Szafari | Firefox | Opera | AZAZ | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Művek | 10+ | Művek | 9+ | Művek | Művek |