Proprietatea Font CSS este folosită pentru a controla aspectul textelor. Prin utilizarea proprietății fontului CSS puteți modifica dimensiunea textului, culoarea, stilul și multe altele. Ați studiat deja cum să faceți textul aldine sau subliniat. Aici, veți ști și cum să redimensionați fontul folosind procentul.
Acestea sunt câteva atribute importante ale fontului:
1) Culoarea fontului CSS
Culoarea fontului CSS este un atribut independent în CSS, deși se pare că face parte din fonturile CSS. Este folosit pentru a schimba culoarea textului.
Există trei formate diferite pentru a defini o culoare:
- După un nume de culoare
- Prin valoare hexazecimală
- Prin RGB
În exemplul de mai sus, am definit toate aceste formate.
body { font-size: 100%; } h1 { color: red; } h2 { color: #9000A1; } p { color:rgb(0, 220, 98); } } <h2>This heading is shown in serif.</h2> <p>This paragraph is written in monospace.</p> Testează-l acum Ieșire:
<h2>This heading is shown in sans-serif.</h2> <h3>This heading is shown in serif.</h3> <p>This paragraph is written in monospace.</p>
3) Dimensiunea fontului CSS
Proprietatea dimensiunea fontului CSS este utilizată pentru a modifica dimensiunea fontului.
Acestea sunt valorile posibile care pot fi utilizate pentru a seta dimensiunea fontului:
| Valoarea mărimii fontului | Descriere |
|---|---|
| xx-mic | folosit pentru a afișa dimensiunea extrem de mică a textului. |
| x-mic | folosit pentru a afișa dimensiunea foarte mică a textului. |
| mic | folosit pentru a afișa dimensiunea mică a textului. |
| mediu | folosit pentru a afișa dimensiunea medie a textului. |
| mare | folosit pentru a afișa dimensiunea mare a textului. |
| extra larg | folosit pentru a afișa dimensiunea textului foarte mare. |
| xx-mari | folosit pentru a afișa dimensiunea textului extrem de mare. |
| mai mic | folosit pentru a afișa dimensiunea textului comparativ mai mică. |
| mai mare | folosit pentru a afișa dimensiunea textului comparativ mai mare. |
| dimensiune în pixeli sau % | folosit pentru a seta valoarea în procente sau în pixeli. |
Practice CSS font-size property <p> This font size is extremely small.</p> <p> This font size is extra small</p> <p> This font size is small</p> <p> This font size is medium. </p> <p> This font size is large. </p> <p> This font size is extra large. </p> <p> This font size is extremely large. </p> <p> This font size is smaller. </p> <p> This font size is larger. </p> <p> This font size is set on 200%. </p> <p> This font size is 20 pixels. </p>Testează-l acum
Ieșire:
Această dimensiune a fontului este extrem de mică.
Această dimensiune a fontului este foarte mică
Această dimensiune a fontului este mică
Această dimensiune a fontului este medie.
Această dimensiune a fontului este mare.
Această dimensiune a fontului este foarte mare.
șir în format java
Această dimensiune a fontului este extrem de mare.
Această dimensiune a fontului este mai mică.
Această dimensiune a fontului este mai mare.
Această dimensiune a fontului este setată la 200%.
șiruri de caractere la numere întregi
Această dimensiune a fontului este de 20 de pixeli.
4) Stil de font CSS
Proprietatea Stil font CSS definește tipul de font pe care doriți să îl afișați. Poate fi italic, oblic sau normal.
body { font-size: 100%; } h2 { font-style: italic; } h3 { font-style: oblique; } h4 { font-style: normal; } } <h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4> Testează-l acum Ieșire:
<h2>This heading is shown in italic font.</h2> <h3>This heading is shown in oblique font.</h3> <h4>This heading is shown in normal font.</h4>
5) Varianta de font CSS
Proprietatea varianta fontului CSS specifică modul de setare a variantei fontului unui element. Poate fi normal și cu majuscule mici.
p { font-variant: small-caps; } h3 { font-variant: normal; } <h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p> Testează-l acum Ieșire:
<h3>This heading is shown in normal font.</h3> <p>This paragraph is shown in small font.</p>
6) Greutatea fontului CSS
Proprietatea de greutate a fontului CSS definește greutatea fontului și specifică cât de aldine este un font. Valorile posibile ale greutății fontului pot fi normale, îngroșate, mai îndrăznețe, mai ușoare sau numerice (100, 200..... până la 900).
Acest font este aldine.
Acest font este mai îndrăzneț.
Acest font este mai ușor.
Acest font are o greutate de 100.
Acest font are o greutate de 200.
Acest font are o greutate de 300.
Acest font are o greutate de 400.
Acest font are o greutate de 500.
Acest font are o greutate de 600.
Acest font are o greutate de 700.
Acest font are o greutate de 800.
Acest font are o greutate de 900.
Testează-l acumIeșire:
Acest font este aldine.
dimensiunea textului latex
Acest font este mai îndrăzneț.
Acest font este mai ușor.
Acest font are o greutate de 100.
Acest font are o greutate de 200.
Acest font are o greutate de 300.
Acest font are o greutate de 400.
Acest font are o greutate de 500.
Acest font are o greutate de 600.
Acest font are o greutate de 700.
Acest font are o greutate de 800.
Acest font are o greutate de 900.