Folosiți CSS font-size proprietate pentru a determina dimensiunea textului.

.container {
    font-size: 33px;
}

Această proprietate ia mai multe tipuri de valori:

  • Cuvinte cheie (cuvinte cheie cu dimensiune absolută și relativă),
  • Lungime (cum ar fi pixeli (px) și unități em) și
  • Procente.

.container {
    font-size: xx-large;
}

Întrebarea este: ce tip de valoare ar trebui să alegeți și de ce?

Aceasta este întrebarea pe care o abordează acest articol. Vă va arăta cum să utilizați font-size proprietate și diferențele dintre numeroasele sale valori. Așadar, data viitoare când trebuie să modificați dimensiunea fontului textului, veți ști la ce valoare să ajungeți.

Valori ale cuvintelor cheie

Există două tipuri de valori ale cuvintelor cheie pe care le puteți utiliza cu dimensiunea fontului: absolute-size și relative-size Cuvinte cheie. Să începem cu absolut.

Cuvinte cheie cu dimensiune absolută

Codul de mai jos utilizează cuvântul cheie de dimensiune absolută small pentru a dimensiona textul HTML.

.childElement {
    font-size: small;
}

Există mai multe opțiuni de cuvinte cheie de dimensiuni absolute din care să alegeți:

  • xx-mic
  • x-mic
  • mic
  • mediu
  • mare
  • extra larg
  • xx-mare
  • xxx-mare

Valoarea unui cuvânt cheie de dimensiune absolută este determinată de browser dimensiunea fontului implicită. De obicei, acea dimensiune este medie.

Cuvinte cheie cu dimensiuni relative

Cuvintele cheie de dimensiuni relative sunt o altă opțiune de cuvânt cheie de luat în considerare. Aveți două dintre care să alegeți: smaller și larger.

.parentElement {
    font-size: smaller;
}

Dimensiunea fontului unui element cu un cuvânt cheie de dimensiune relativă este relativ—Mai mare sau mai mic — la dimensiunea fontului părintelui său.

Altfel spus, dimensiunea fontului elementului părinte afectează dimensiunea fontului elementului copil, după cum puteți vedea mai jos.

În acest exemplu, cuvântul cheie de dimensiune relativă smaller se aplică elementului copil și valorii dimensiunii absolute large se aplică elementului părinte.

Valori de lungime

font-size acceptă mai multe valori de lungime diferite. Vom explora trei dintre ele: pixeli (px) și unități em și rem. În ciuda selecției dvs., valoarea lungimii pe care o utilizați trebuie să fie pozitivă.

.parentElement {
    font-size: 60px;
}

Pixeli

Pixelii sunt un unitate de lungime absolută. Asta înseamnă că sunt nu afectate de alte elemente, cum ar fi elementul părinte sau dimensiunea ferestrei.

În consecință, pixelii sunt preciși: definiți numărul exact de pixeli de care aveți nevoie pentru un element și de obicei obțineți asta. Cu toate acestea, pot exista mici diferențe între browsere.

Observați că elementele copil folosesc pixels și au aceeași dimensiune a fontului în exemplul de cod de mai sus.

EMs

Deși vă puteți gândi la pixeli ca fiind fixi, gândiți-vă la valorile em ca variabile.

Asta pentru că valorile em sunt a unitate de lungime relativă. Dimensiunea fontului unui element care utilizează o valoare em este relativ la dimensiunea fontului părintelui său.

Cu toate acestea, spuneți că nu ați setat o dimensiune de font pentru elementul părinte. Nici nu ați stabilit unul altundeva mai sus în DOM. În acest caz, valoarea em este calculată folosind implicit al browserului (adesea 16 px).

Să concretizăm această idee.

Spuneți că elementul părinte este setat la 30 px și că elementul copil este setat la 2em. Apoi, dimensiunea fontului redat al elementului copil este de 60 px (2 x 30 px = 60 px). Puteți vedea acest scenariu în codul de mai jos.

valorile em pot fi problematice datorită efectului lor de compunere, lucru demonstrat în exemplul următor.

Când aveți mai multe elemente care utilizează valori em imbricate unul în celălalt, valorile dimensiunii fontului sunt compuse: ele devin din ce în ce mai mari. Acesta este efectul de compunere în acțiune.

REM-urile

Introduceți valorile rem, care au fost create pentru a face față problemei de compunere a ems.

Reamintim că valorile em sunt relative la elementul părinte. În schimb, valorile rem sunt relative la dimensiunea fontului elementului rădăcină (html).

Aceasta înseamnă că puteți aplica o valoare rem unui element și nu va fi afectată de dimensiunea fontului părintelui. Acest lucru evită efectul de compunere pe care l-am experimentat mai sus.

Acest exemplu folosește font-size proprietate cu o valoare rem.

Iată un punct cheie din exemplul de mai sus: dimensiunea fontului elementului părinte o face nu afectează dimensiunea fontului elementelor copil.

Procente

Procentele oferă încă o modalitate de a seta dimensiunea fontului relativ la dimensiunea fontului elementului părinte.

Elementul cu procentul se referă la elementul său părinte pentru a determina dimensiunea fontului. Valoarea procentuală trebuie să fie pozitivă.

Iată un exemplu.

După cum puteți vedea, când vine vorba de dimensiunea fontului, aveți o mulțime de opțiuni pentru a vă potrivi nevoilor.

Scriu despre învățarea programării și despre cele mai bune modalități de a continua amymhaddad.com. Eu de asemenea tweet despre programare, învățare și productivitate: @amymhaddad.