Proprietățile de fonturi CSS definesc familia de fonturi, îndrăzneala, mărimea și stilul unui text.
Diferența dintre fonturile serif și sans-serif
Familii CSS Font
În CSS, există două tipuri de nume de familie font:
- generic family de (like "Serif" or "Monospace") generic family - un grup de familii de fonturi cu un aspect similar (like "Serif" or "Monospace")
- font family de "Times New Roman" font family - o familie de fonturi specifice (cum ar fi "Times New Roman" sau "Arial")
| familia Generic | Familie de fonturi | Descriere |
|---|---|---|
| Serif | Times New Roman Georgia | fonturile serif au linii mici la capete pe unele caractere |
| Sans-serif | Arial Verdana | „Sans“ înseamnă, fără a - aceste fonturi nu au liniile de la capetele de caractere |
| Monospațiat | Courier New Lucida Console | Toate caracterele Monospațiat au aceeași lățime |
Note: Pe ecranele de computer, fonturi sans-serif sunt considerate mai ușor de citit decât fonturile serif.
Familie de fonturi
Familia de fonturi a unui text este setat cu font-family proprietate.
font-family proprietate ar trebui să dețină mai multe nume de fonturi ca "fallback" de sistem. În cazul în care browser-ul nu acceptă primul font, încearcă următorul font, și așa mai departe.
Începeți cu fontul pe care doriți, și se încheie cu o familie generic, pentru a permite browser-ul alege un font similar din familia generica, în cazul în care nu există alte fonturi sunt disponibile.
Note : Dacă numele unei familii de fonturi este mai mult de un cuvânt, acesta trebuie să fie în ghilimele, cum ar fi: "Times New Roman" .
Mai mult de o familie de fonturi este specificat într-o listă separată prin virgulă:
Pentru combinațiile de fonturi utilizate în mod obișnuit, uita - te la nostru Web Safe Font Combinații .
Stilul fontului
font-style de font-style proprietate este utilizat în principal pentru a specifica textul cursiv.
Această proprietate are trei valori:
- normal - Textul este afișat în mod normal,
- italic - Textul este prezentat în caractere cursive
- oblic - Textul este "leaning" (oblique is very similar to italic, but less supported)
Exemplu
p.normal {
font-style: normal;
}
p.italic {
font-style: italic;
}
p.oblique {
font-style: oblique;
} Încearcă - l singur » Marimea fontului
font-size proprietate setează dimensiunea textului.
Fiind capabil de a gestiona dimensiunea textului este important în web design. Cu toate acestea, nu ar trebui să utilizați ajustări dimensiunea fontului pentru a face punctele arate ca pozițiile sau titlurile arata ca paragrafe.
Utilizați întotdeauna etichetele HTML corespunzătoare, cum ar fi <h1> - <h6> pentru titluri și <p> pentru paragrafe.
Valoarea font-size poate fi o mărime absolută sau relativă.
Dimensiune absolută:
- Setează textul la o dimensiune specificată
- Nu permite unui utilizator pentru a modifica dimensiunea textului în toate browserele (rău, din motive de accesibilitate)
- mărimea absolută este utilă atunci când dimensiunea fizică a producției este cunoscută
Mărime relativă:
- Setează dimensiunea în raport cu elementele din jur
- Permite unui utilizator pentru a modifica dimensiunea textului în browsere
Note: Dacă nu specificați o dimensiune de font, dimensiunea implicită pentru textul normal, cum ar fi punctele, este 16px (16px=1em) .
Set Dimensiune font pixeli
Setarea dimensiunii textului cu pixeli vă oferă un control deplin asupra dimensiunii textului:
Sfat: Dacă utilizați pixeli, puteți utiliza în continuare instrumentul de zoom pentru a redimensiona întreaga pagină.
Set Dimensiune font Cu Em
Pentru a permite utilizatorilor pentru a redimensiona textul (in the browser menu) , mulți dezvoltatori le folosesc în loc de pixeli.
Unitatea de dimensiune le este recomandat de W3C.
1em este egal cu dimensiunea fontului curent. Dimensiunea textului implicit în browser este 16px. Deci, dimensiunea implicită a 1em este 16px.
Dimensiunea poate fi calculată din pixeli em folosind această formulă: pixels / 16 = em
Exemplu
h1 {
font-size: 2.5em; /* 40px/16=2.5em */
}
h2 {
font-size: 1.875em; /* 30px/16=1.875em */
}
p {
font-size: 0.875em; /* 14px/16=0.875em */
} Încearcă - l singur » În exemplul de mai sus, dimensiunea textului în em este același ca și exemplul precedent în pixeli. Cu toate acestea, cu dimensiunea em, este posibil să se adapteze dimensiunea textului în toate browserele.
Din păcate, există încă o problemă cu versiuni mai vechi ale IE. Textul devine mai mare decât ar trebui, atunci când a făcut mai mare și mai mică decât ar trebui, atunci când face mai mici.
Utilizați o combinație de Percent și Em
Soluția care funcționează în toate browserele, este de a stabili un standard pentru font-size în procente pentru <body> Elementul:
Exemplu
body {
font-size: 100%;
}
h1 {
font-size: 2.5em;
}
h2 {
font-size: 1.875em;
}
p {
font-size: 0.875em;
} Încearcă - l singur » Codul nostru funcționează acum mare! Acesta arată aceeași dimensiune de text în toate browserele, și permite toate browserele pentru a mări sau redimensiona textul!
Greutate Font
font-weight proprietate specifică greutatea unui font:
Varianta fontului
font-variant proprietate specifică dacă este sau nu un text ar trebui să fie afișat într - un font mic-caps.
Într-un font mic-capace, toate literele mici sunt convertite în litere mari. Cu toate acestea, literele majuscule convertite apare într-o dimensiune de font mai mică decât literele majuscule originale în text.
Exemplu
p.normal {
font-variant: normal;
}
p.small {
font-variant: small-caps;
} Încearcă - l singur » 
Mai multe exemple
Toate proprietățile fontului într - o singură declarație
Acest exemplu demonstrează modul de utilizare a proprietății prescurtare pentru setarea tuturor proprietăților de font într-o singură declarație.
Testați-te cu exerciții!
Exercițiul 1 » Exercițiul 2» Exercițiul 3 » Exercițiul 4» Exercițiul 5 »
Toate proprietățile CSS Font
| Proprietate | Descriere |
|---|---|
| font | Setează toate proprietățile de fonturi într-o singură declarație |
| font-family | Specifică familia de fonturi pentru text |
| font-size | Specifică dimensiunea fontului textului |
| font-style | Specifică stilul fontului pentru text |
| font-variant | Specifică dacă este sau nu un text ar trebui să fie afișat într-un font mic-caps |
| font-weight | Specifică greutatea unui font |