Proiectarea tipografică este o piesă importantă a unui design de site web de succes. Obiectivul fiecărui profesionist în web design este crearea de site-uri cu text ușor de citit și care arată minunat. Pentru a realiza acest lucru, va trebui să puteți seta fonturile specifice pe care doriți să le utilizați pe paginile dvs. web. Pentru a specifica tipul sau familia de fonturi pe documentele dvs. Web, veți utiliza proprietatea stilului de font-familie din CSS.
Cel mai simplu stil de familie de fonturi pe care l-ați putea folosi ar include o singură familie de fonturi:
p {
font-family: Arial;
}
Dacă ați aplica acest stil unei pagini, toate paragrafele vor fi afișate în familia de fonturi „Arial”. Acest lucru este minunat și din moment ce „Arial” este ceea ce este cunoscut sub numele de „font web-safe”, ceea ce înseamnă majoritatea (dacă nu toate) computerele l-ar avea instalat, puteți fi liniștit știind că pagina dvs. se va afișa în destinația dorită font.
Deci, ce se întâmplă dacă fontul selectat nu poate fi găsit? De exemplu, dacă nu utilizați un „font web-safe” pe o pagină, ce face agentul utilizator dacă nu are acel font? Fac o înlocuire.
Acest lucru poate duce la unele pagini cu aspect amuzant. Am mers odată pe o pagină în care computerul meu a afișat-o în întregime în „Wingdings” (un set de pictograme) deoarece computerul meu nu avea fontul specificat de dezvoltator și browserul meu a făcut o alegere abisală în ce font ar folosi ca înlocuire. Pagina a fost complet nelegibilă pentru mine! Aici intră în joc o stivă de fonturi.
Separați mai multe familii de fonturi cu o virgulă într-o stivă de fonturi
O „stivă de fonturi” este o listă de fonturi pe care doriți să le utilizeze pagina dvs. Ați pune opțiunile de font în ordinea preferințelor dvs. și le-ați separa pe fiecare cu o virgulă. Dacă browserul nu are prima familie de fonturi din listă, va încerca a doua și apoi a treia și așa mai departe până când va găsi una pe care o are în sistem.
font-family: Pussycat, Algerian, Broadway;
În exemplul de mai sus, browserul va căuta mai întâi fontul „Pussycat”, apoi „Algerian”, apoi „Broadway” dacă nu a fost găsit niciunul dintre celelalte fonturi. Acest lucru vă oferă mai multe șanse ca cel puțin unul dintre fonturile alese să fie utilizate. Nu este perfect, motiv pentru care avem încă mai multe de adăugat la stiva noastră de fonturi (citiți mai departe!).
Utilizați fonturi generice Last
Deci, puteți crea o stivă de fonturi cu o listă de fonturi și încă nu aveți niciunul dintre care browserul să poată găsi. Nu doriți ca pagina dvs. să apară ilizibilă dacă browserul face o alegere slabă de înlocuire. Din fericire, CSS are o soluție și pentru asta și se numește fonturi generice.
Ar trebui să încheiați întotdeauna lista de fonturi (chiar dacă este o listă a unei familii sau numai fonturi sigure pentru web) cu un font generic. Există cinci pe care le puteți utiliza:
- Cursiv
- Fantezie
- Monospace
- Sanserif
- Serif
Cele două exemple de mai sus pot fi schimbate în:
font-family: Arial, sans-serif;
sau.
font-family: Pussycat, Algerian, Broadway, fantasy;
Unele nume de familie de fonturi sunt două sau mai multe cuvinte
Dacă familia de fonturi pe care doriți să o utilizați este mai mult de un cuvânt, atunci ar trebui să o înconjurați cu ghilimele duble. În timp ce unele browsere pot citi familiile de fonturi fără ghilimele, pot exista probleme dacă spațiul alb este condensat sau ignorat.
font-family: "Times New Roman", serif;
În acest exemplu, puteți vedea că numele fontului „Times New Roman”, care are mai multe cuvinte, este cuprins între ghilimele. Acest lucru îi spune browserului că toate aceste trei cuvinte fac parte din numele fontului respectiv, spre deosebire de trei fonturi diferite, toate cu un singur cuvânt.