CSS Dimensiunea Fontului
Proprietatea font-size setează dimensiunea textului.
Gestionarea dimensiunii textului contează în web design, dar nu folosiți dimensiunea pentru a face paragrafele să arate ca titluri sau invers. Folosiți întotdeauna etichetele corecte, precum <h1> până la <h6> pentru titluri și <p> pentru paragrafe.
Dimensiunea poate fi absolută sau relativă. Dimensiunile absolute includ px și cuvinte cheie precum small, medium și large. Dimensiunile relative includ em (relativ la părinte), rem (relativ la elementul rădăcină), % (relativ la părinte) și smaller / larger.
Cum se alege unitatea potrivită?
- Folosiți
pxpentru control fix, precis, dar pagina nu se va scala la fel de bine pe diferite dimensiuni de ecran sau preferințele utilizatorului. - Dimensiunile absolute ajută atunci când dimensiunea fizică de ieșire este cunoscută.
- Folosiți
emsaurempentru design-uri scalabile, care permit utilizatorilor să ajusteze dimensiunea textului în browser. - Folosiți
%pentru a dimensiona textul relativ la un element părinte.
Setarea Dimensiunii Fontului cu Pixeli
Setarea dimensiunii în pixeli vă oferă control total asupra dimensiunii textului.
Cu pixeli, pagina poate să nu se scaleze bine pe diferite dimensiuni de ecran și utilizatorii nu pot schimba dimensiunea textului din setările lor, deși pot totuși să mărească întreaga pagină.
Exemplu
Dimensiunile titlului și paragrafului sunt setate în pixeli.
<style> intern, setați h1 la 40px, h2 la 30px și p la 16px. Adăugați un titlu de fiecare nivel și un paragraf.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
font-size: 40px;
}
h2 {
font-size: 30px;
}
p {
font-size: 16px;
}
</style>
</head>
<body>
<h1>This is a heading (40px)</h1>
<h2>This is a heading (30px)</h2>
<p>This is a paragraph (16px).</p>
</body>
</html>
Setarea Dimensiunii Fontului cu Em
Unitatea em este relativă la dimensiunea fontului elementului părinte. Dacă părintele este 16px, atunci 2.5em este 40px.
Spre deosebire de pixeli, em permite utilizatorilor să ajusteze dimensiunea textului în setările browserului.
Exemplu
Aceleași dimensiuni ca în exemplul cu pixeli, scrise cu em.
<style> intern, setați body la 16px, apoi h1 la 2.5em, h2 la 1.875em și p la 1em. Adăugați un titlu de fiecare nivel și un paragraf.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-size: 16px; /* Base font size */
}
h1 {
font-size: 2.5em; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875em; /* 1.875 * 16 = 30px */
}
p {
font-size: 1em; /* 1 * 16 = 16px */
}
</style>
</head>
<body>
<h1>This is a heading (2.5em)</h1>
<h2>This is a heading (1.875em)</h2>
<p>This is a paragraph (1em).</p>
</body>
</html>
Setarea Dimensiunii Fontului cu Rem
Unitatea rem este relativă la dimensiunea fontului elementului rădăcină <html>, indiferent de locul unde se află elementul în pagină.
Acest lucru face rem util pentru design-uri scalabile, responsive: schimbați dimensiunea fontului <html> și totul dimensionat în rem se scalează odată cu el. Implicit, 1rem este egal cu 16px în majoritatea browserelor.
Exemplu
Aceleași dimensiuni scrise cu rem, relativ la elementul rădăcină.
<style> intern, setați elementul html la 16px, apoi h1 la 2.5rem, h2 la 1.875rem și p la 1rem. Adăugați un titlu de fiecare nivel și un paragraf.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html {
font-size: 16px; /* Set the root font size */
}
h1 {
font-size: 2.5rem; /* 2.5 * 16 = 40px */
}
h2 {
font-size: 1.875rem; /* 1.875 * 16 = 30px */
}
p {
font-size: 1rem; /* 1 * 16 = 16px */
}
</style>
</head>
<body>
<h1>This is a heading (2.5rem)</h1>
<h2>This is a heading (1.875rem)</h2>
<p>This is a paragraph (1rem).</p>
</body>
</html>
Unitatea vw
Dimensiunea fontului poate fi setată și cu unitatea vw, care înseamnă lățimea viewport-ului.
1vw reprezintă 1% din lățimea curentă a viewport-ului browserului. Deci, dacă viewport-ul are 500px lățime, 1vw este 5px. Acest lucru face ca dimensiunea textului să urmeze dimensiunea ferestrei browserului.
Exemplu
Titlul și paragraful se scalează odată cu lățimea ferestrei folosind vw.
<style> intern, setați h1 la 10vw și p la 5vw. Adăugați un titlu și un paragraf, notând că redimensionarea ferestrei modifică dimensiunea textului.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
h1 {
font-size: 10vw;
}
p {
font-size: 5vw;
}
</style>
</head>
<body>
<h1>Hello World</h1>
<p>Resize the browser window to see how the font size scales.</p>
</body>
</html>