Den font-sizeegenskapen anger storleken eller höjden av teckensnittet. font-sizepåverkar inte bara teckensnittet som det används på, utan används också för att beräkna värdet på em, rem och ex längdenheter.
p ( font-size: 20px; )font-sizekan acceptera nyckelord, längdenheter eller procentsatser som värden. Det är dock viktigt att notera att det är ett obligatoriskt värde när det förklaras som en del av fontstenografiegenskapen font-size. Om den inte ingår i förkortningen ignoreras hela raden.
Längdvärden (t.ex. px, em, rem, ex, etc) som tillämpas på font-sizekan inte vara negativa.
Absoluta nyckelord och värden
.element ( font-size: small; )Den accepterar följande absoluta nyckelordsvärden:
xx-smallx-smallsmallmediumlargex-largexx-large
Dessa absoluta värden mappas till specifika teckenstorlekar som beräknas av webbläsaren. Men du kan också använda två nyckelordsvärden som är relativa till det överordnade elementets teckenstorlek.
Andra absoluta värden inkluderar mm(millimeter), cm(centimeter), in(tum), pt(punkter) och pc(picas). En punkt är lika med 1/72 tum medan en pica är lika med 12 punkter - dessa värden används vanligtvis för tryckta dokument.
Relativa nyckelord
.element ( font-size: larger; )largersmaller
Till exempel, om det överordnade elementet har en teckenstorlek på small, kommer ett underordnat element med en definierad relativ storlek largeratt göra teckenstorleken lika med mediumför det underordnade elementet.
Procentvärden
.element ( font-size: 110%; )Procentvärden, som att ställa in en teckenstorlek på 110%, är också relativt till det överordnade elementets teckenstorlek som visas i demo nedan:
Se pennan qdbELL av CSS-Tricks (@ css-tricks) på CodePen.
Em-enheten
.element ( font-size: 2em; )Em-enheten är en relativ enhet baserad på det beräknade värdet på det överordnade elementets teckenstorlek. Detta innebär att underordnade element alltid är beroende av sin förälder för att ställa in teckensnittsstorlek. Till exempel:
This is a heading
This is some text.
.container ( font-size: 16px; ) p ( font-size: 1em; ) h2 ( font-size: 2em; )I exemplet ovan kommer stycket att ha en fontstorlek på 16 pixlar eftersom 1 x 16 = 16 pixlar medan rubriken blir 32 pixlar eftersom 2 x 16 = 32 pixlar. Det finns många fördelar med att skala upp beroende på typstorleken för det överordnade elementet, nämligen att vi kan slå in elementen i en behållare och veta att alla barn alltid kommer att vara relativt varandra:
Se pennan Ta reda på hur em-enheten fungerar av CSS-Tricks (@ css-tricks) på CodePen.
Rem-enheten
När det gäller rem-enheter beror dock fontstorleken på rotelementets (eller htmlelementets) värde .
html ( font-size: 16px; ) p ( font-size: 1.5rem; )I exemplet ovan är rem-enheten lika med 16 pixlar (eftersom den ärvs från htmlelementet / root) och därmed beräknas teckenstorleken för alla styckeelement till 24 pixlar (1,5 x 16 = 24). Till skillnad från em-enheter ignoreras stycket från alla sina föräldrar förutom roten.
Den här enheten stöds av följande webbläsare:
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| Arbetar | Arbetar | Arbetar | Arbetar | 10+ | Arbetar | Arbetar |
Ex-enheten
.element ( font-size: 20ex; )För ex-enheter skulle 1ex vara lika med den beräknade höjden på den små bokstaven x på rotelementet. Så i exemplet nedan är htmlelementet inställt på 20pxoch alla andra teckensnittsstorlekar bestäms av x-höjden för det specifika teckensnittet.
Se pennan Ta reda på hur ex-enheten fungerar av CSS-Tricks (@ css-tricks) på CodePen.
Experimentera med demo ovanför min ersätta den font-familypå htmlelementet för att se hur den andra font-storlekar förändring.
Viewport enheter
.element-one ( font-size: 100vh; ) .element-two ( font-size: 100vw; )Viewport-enheter, såsom vwoch vh, ställer in teckenstorleken på ett element i förhållande till visningsportens dimensioner:
- 1vw = 1% av visningsportens bredd
- 1vh = 1% av visningshöjd
Så om vi tar följande exempel:
.element ( font-size: 100vh; )Då kommer detta att säga att elementets fontstorlek alltid ska vara 100% av visningsportens höjd (50vh skulle vara 50%, 15vh skulle vara 15% och så vidare). I demonstrationen nedan försök att ändra storlek på exemplet för att se typen sträcka:
Se pennstorlekstypen med vh-enheter av CSS-Tricks (@ css-tricks) på CodePen.
vw enheterna skiljer sig åt genom att det ställer in bokstävernas höjd efter visningsportens bredd, så i demo nedan måste du ändra storlek på webbläsarfönstret horisontellt för att se dessa ändringar:
Se pennstorlekstypen med vw-enheter av CSS-Tricks (@ css-tricks) på CodePen.
Dessa enheter stöds av följande webbläsare:
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 31+ | 7+ | 31+ | 27+ | 9+ | 4.4+ | 7.1+ |
Det är viktigt att notera att det finns två andra visningsenheter: vminoch vmax. Den första hittar värdena för vhoch vwoch ställer in teckenstorleken som den minsta av de två medan den vmaxställer in storleken på den största av dessa två värden.
CH-enheten
.element ( font-size: 24ch; )Den chenheten liknar den exenhet i det att den kommer att ange teckenstorlek av ett element i förhållande till bredden av 0 (noll) glyf på typsnittet:
Se pennstorlekstyp med ch-enheter från CSS-Tricks (@ css-tricks) på CodePen.
Denna enhet stöds av:
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 27+ | Arbetar | 10+ | Arbetar | 9+ | Arbetar | Arbetar |