CSS-i fondisuuruse õpetus - kuidas muuta HTML-i teksti suurust

font-sizeTeksti suuruse määramiseks kasutage atribuuti CSS .

.container { font-size: 33px; } 

Sellel atribuudil on mitut tüüpi väärtusi:

  • Märksõnad (absoluutsuuruse ja suhtelise suurusega märksõnad),
  • Pikkus (näiteks pikslid (px) ja em ühikud) ja
  • Protsendid.
.container { font-size: xx-large; } 

Küsimus on: millise väärtuse tüübi peaksite valima ja miks?

Selle küsimusega see artikkel tegelebki. See näitab teile, kuidas font-sizevara kasutada ja selle paljude väärtuste erinevusi. Nii et järgmine kord, kui peate oma teksti fondisuurust muutma, saate teada, millise väärtuseni jõuda.

Märksõna väärtused

Fondi suurusega saate kasutada kahte tüüpi märksõna väärtusi: absolute-sizeja relative-sizemärksõnu. Alustame absoluutsest.

Absoluutsuurused märksõnad

Allolev kood kasutab smallHTML-teksti suuruse määramiseks absoluutsuurust märksõna .

.childElement { font-size: small; } 

Absoluutsuuruse märksõna valikute vahel on rohkem valikuid:

  • xx-väike
  • x-väike
  • väike
  • keskmine
  • suur
  • x-suur
  • xx-suur
  • xxx-suur

Absoluutsuuruse märksõna väärtuse määrab brauseri vaikimisi fondisuurus. Tavaliselt on see suurus keskmine.

Suhtelise suurusega märksõnad

Suhtelise suurusega märksõnad on veel üks märksõna võimalus, mida kaaluda. Teil on valida kahe vahel: smallerja larger.

.parentElement { font-size: smaller; } 

Suhtelise suurusega märksõnaga elemendi fondi suurus on suhteline - suurem või väiksem - vanema fondi suurusega.

Teisisõnu, vanemelemendi fondi suurus mõjutab allelemendi fondi suurust, nagu näete allpool.

Selles näites rakendatakse suhtelise suurusega märksõna smalleralamelemendile ja absoluutsuuruse väärtus largevanemelemendile.

Pikkuse väärtused

font-sizeaktsepteerib mitut erinevat pikkuse väärtust. Uurime neist kolme: pikslit (px) ning em ja rem ühikuid. Vaatamata teie valikule peab teie kasutatav pikkuse väärtus olema positiivne.

.parentElement { font-size: 60px; } 

Pikslid

Pikslid on absoluutse pikkuse ühik. See tähendab, et muud elemendid, nagu vanemelement ega akna suurus , neid ei mõjuta.

Seetõttu on pikslid täpsed: määrate elemendile vajaliku pikslite täpse arvu ja tavaliselt saate selle. Brauserite vahel võib siiski olla väikseid erinevusi.

Pange tähele, et alamelemendid kasutavad pixelsja neil on ülaltoodud koodinäites sama fondisuurus.

EM-id

Ehkki pikslitest võib mõelda fikseeritud, mõtle em-väärtustest muutuvaks.

Seda seetõttu, et em väärtused on suhtelise pikkuse ühik. Kirjasuurus element, mis kasutab em väärtus ei suhteline font size oma vanem.  

Oletame siiski, et te pole vanemelemendile fondi suurust määranud. Ega te pole ühtegi mujale DOM-i kõrgemale seadnud. Sellisel juhul arvutatakse em-väärtus brauseri vaikeseade järgi (sageli 16px).

Teeme selle idee konkreetseks.

Oletame, et vanemelemendi väärtuseks on seatud 30 pikslit ja alamelemendi väärtuseks 2em. Seejärel on alamelemendi renderdatud fondi suurus 60 pikslit (2 x 30 pikslit = 60 pikslit). Seda stsenaariumi näete allolevas koodis.

em väärtused võivad olla problemaatilised nende ühendava toime tõttu, mida on näidatud järgmises näites.

Kui teil on mitu elementi, mis kasutavad üksteise sisse sisestatud em väärtusi, liituvad fondi suuruse väärtused: need muutuvad järjest suuremaks. See on toimes liitmõju.

REM-id

Sisestage rem-väärtused, mis loodi emide liitmise probleemi lahendamiseks.

Tuletame meelde, et em-väärtused on vanemelemendi suhtes suhtelised. Seevastu rem-väärtused on seotud root (html) elemendi fondisuurusega.  

See tähendab, et saate elemendile rakendada rem-väärtuse ja vanema fondi suurus seda ei mõjuta. See väldib ülalkogenud efekti.

Selles näites kasutatakse font-sizerem-väärtusega atribuuti.

Siin on ülaltoodud näite põhipunkt: vanemelemendi fondi suurus ei mõjuta alamelementide fondisuurust.

Protsendid

Protsendid pakkuda veel üks viis määrata fondi suuruse suhtelise vanemale elemendi fondi suurust.

Protsendiga element viitab fondi suuruse määramiseks selle vanemelemendile. Protsentväärtus peab olema positiivne.

Siin on näide.

Nagu näete, on fondi suuruse osas teie vajadustele vastamiseks palju võimalusi.

Kirjutan programmeerimise õppimisest ja parimatest viisidest selle saavutamiseks saidil amymhaddad.com. Ma säutsun kaprogrammeerimise, õppimise ja tootlikkuse teemal : @amymhaddad.