CSS-kirjasinkoko-opas - Kuinka muuttaa tekstikokoa HTML-muodossa

Määritä font-sizetekstin koko CSS- ominaisuuden avulla.

.container { font-size: 33px; } 

Tämä ominaisuus vie useita arvotyyppejä:

  • Avainsanat (absoluuttisen koon ja suhteellisen koon avainsanat),
  • Pituus (kuten pikselit (px) ja em-yksiköt) ja
  • Prosenttiosuudet.
.container { font-size: xx-large; } 

Kysymys kuuluu: minkä tyyppinen arvo kannattaa valita ja miksi?

Se on kysymys, johon tämä artikkeli puuttuu. Se näyttää, kuinka font-sizeomaisuutta käytetään, ja sen monien arvojen väliset erot. Joten kun seuraavan kerran joudut muuttamaan tekstin kirjasinkokoa, tiedät minkä arvon haluat saavuttaa.

Avainsanojen arvot

Kirjasinkoon kanssa voi käyttää kahden tyyppisiä avainsanan arvoja: absolute-sizeja relative-sizeavainsanoja. Aloitetaan absoluuttisella.

Absoluuttisen koon avainsanat

Alla oleva koodi käyttää absoluuttisen koon avainsanaa smallHTML-tekstin koon muuttamiseen.

.childElement { font-size: small; } 

Absoluuttisen koon avainsanavaihtoehtoja on enemmän:

  • xx-pieni
  • x-pieni
  • pieni
  • keskipitkällä
  • suuri
  • x-iso
  • xx-iso
  • xxx-iso

Absoluuttisen koon avainsanan arvo määräytyy selaimen oletusfonttikoon mukaan. Tyypillisesti tämä koko on keskikokoinen.

Suhteellisen koon avainsanat

Suhteellisen koon avainsanat ovat toinen harkittavissa oleva avainsanavaihtoehto. Sinulla on kaksi valittavaa: smallerja larger.

.parentElement { font-size: smaller; } 

Suhteellisen koon avainsanan sisältävän elementin kirjasinkoko on suhteellinen - suurempi tai pienempi - vanhemman kirjasinkokoon.

Toisin sanoen ylätason elementin kirjasinkoko vaikuttaa lapsielementin kirjasinkokoon, kuten alla näkyy.

Tässä esimerkissä suhteellisen koon avainsana smallerkäytetään alielementtiin ja absoluuttisen koon arvo largeylätason elementtiin.

Pituuden arvot

font-sizehyväksyy useita eri pituusarvoja. Tutkimme kolmea niistä: pikseliä (px) sekä em ja rem-yksiköitä. Valinnastasi huolimatta käyttämäsi pituusarvon on oltava positiivinen.

.parentElement { font-size: 60px; } 

Pikselit

Pikselit ovat absoluuttinen pituusyksikkö. Tämä tarkoittaa, että muut elementit, kuten pääelementti tai ikkunan koko, eivät vaikuta niihin.

Tämän seurauksena pikselit ovat tarkkoja: määrität elementille tarkan pikselimäärän, jonka yleensä saat. Selainten välillä voi kuitenkin olla pieniä eroja.

Huomaa, että alielementit käyttävät pixelsja niillä on sama kirjasinkoko yllä olevassa koodinäytteessä.

EM: t

Vaikka voit ajatella pikseleitä kiinteinä, ajattele em-arvot muuttuvina.

Tämä johtuu siitä, että em-arvot ovat suhteellinen pituusyksikkö. Em-arvoa käyttävän elementin kirjasinkoko on suhteessa sen vanhemman kirjasinkokoon.  

Oletetaan kuitenkin, että et ole asettanut ylätason elementin kirjasinkokoa. Etkä ole asettanut yhtä muualle korkeammalle DOM: iin. Tässä tapauksessa em-arvo lasketaan käyttämällä selaimen oletusarvoa (usein 16 kuvapistettä).

Tehdään tämä idea konkreettiseksi.

Sano, että vanhemman elementin arvoksi on asetettu 30 kuvapistettä ja alemman elementin arvoksi 2em. Sitten alielementin renderoitu kirjasinkoko on 60 kuvapistettä (2 x 30 kuvapistettä = 60 kuvapistettä). Näet tämän skenaarion alla olevasta koodista.

em-arvot voivat olla ongelmallisia niiden yhdistävän vaikutuksen vuoksi, mikä on osoitettu seuraavassa esimerkissä.

Kun sinulla on useita elementtejä, jotka käyttävät em-arvoja sisäkkäin, fontin koon arvot yhdistyvät: ne kasvavat ja kasvavat. Tämä on yhdistävä vaikutus toiminnassa.

REM: t

Syötä rem-arvot, jotka on luotu käsittelemään emien yhdistämisongelmaa.

Muista, että em-arvot ovat suhteessa pääelementtiin. Sitä vastoin rem-arvot ovat suhteessa juuri (html) -elementin kirjasinkokoon.  

Tämä tarkoittaa, että voit käyttää rem-arvoa elementtiin, eikä vanhemman kirjasinkoko vaikuta siihen. Tämä kiertää edellä koetun yhdistelmävaikutuksen.

Tässä esimerkissä käytetään font-sizeominaisuutta, jolla on rem-arvo.

Tässä on avain edellä olevasta esimerkistä: ylätason elementin kirjasinkoko ei vaikuta alielementtien kirjasinkokoon.

Prosenttiosuudet

Prosentit tarjoavat vielä yhden tavan asettaa fonttikoko suhteessa ylätason fonttikokoon.

Elementti, jolla on prosenttiosuus, viittaa sen vanhempaan elementtiin kirjasinkoon määrittämiseksi. Prosentuaalisen arvon on oltava positiivinen.

Tässä on esimerkki.

Kuten näette, kirjasinkoon suhteen sinulla on paljon vaihtoehtoja tarpeidesi mukaan.

Kirjoitan ohjelmoinnin oppimisesta ja parhaista tavoista edetä siinä osoitteessa amymhaddad.com. Olenmyöstweet ohjelmoinnista, oppiminen, ja tuottavuus: @amymhaddad.