Sintaxa proprietății familiei de fonturi
Designul tipografic este o piesă extrem de importantă a unui design de site web de succes. Crearea de site-uri cu text ușor de citit și care arată excelent este scopul fiecărui profesionist de design web. Pentru a realiza acest lucru, va trebui să puteți seta fonturile specifice pe care doriți să le utilizați în paginile dvs. web. Pentru a specifica tipul de font sau familia de fonturi din documentele Web, veți utiliza proprietatea stilului familiei fontului în CSS.
Cel mai simplu stil de stil de familie pe care l-ați putea folosi ar include o singură familie de fonturi:
p {font-familie: Arial; }Dacă ați aplicat 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 ca un "font sigur pentru web", ceea ce înseamnă că majoritatea (dacă nu toate) ar fi instalat computerul, vă puteți odihni destul de ușor, știind că pagina dvs. va fi afișată în fontul intenționat .
Deci, ce se întâmplă dacă fontul selectat nu poate fi găsit? De exemplu, dacă nu utilizați un "font sigur pentru web" pe o pagină, ce face agentul utilizator dacă nu are acel font? Ei fac o înlocuire.
Acest lucru poate duce la unele pagini foarte amuzante. M-am dus o dată la o pagină în care computerul meu a afișat-o complet în "Wingdings" (un set de pictograme) deoarece calculatorul meu nu avea fontul specificat de dezvoltator și browserul meu a făcut o alegere foarte slabă în ce tip de font utilizați ca înlocuitor. Pagina a fost complet necitită pentru mine! Aici intră în joc o stivă de fonturi.
Separă mai multe familii de fonturi cu o comă într-o stivă de fonturi
O "stivă de fonturi" este o listă de fonturi pe care doriți să o utilizați. Ați alege opțiunile de font în ordinea preferințelor dvs. și separați 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 găsește una pe care o are pe sistem.
font-familie: Pussycat, Algerian, Broadway;În exemplul de mai sus, browserul va căuta mai întâi fontul "Pussycat", apoi "Algerian", apoi "Broadway" dacă nu s-ar găsi niciunul din celelalte fonturi. Acest lucru vă oferă mai multă șansă ca cel puțin unul dintre fonturile dvs. să fie utilizat. Nu este perfect, motiv pentru care avem încă mai multe pe care le putem adăuga la stiva noastră de fonturi (citiți mai departe!).
Utilizați ultimele fonturi generice
Deci, puteți crea un stilu de fonturi cu o listă de fonturi și încă nu aveți nici una din ele pe care browserul o poate găsi. Desigur, nu doriți ca pagina dvs. să apară necitită dacă browserul face o alegere insuficientă de substituire. Din fericire, CSS are și o soluție pentru acest lucru: fonturi generice .
Ar trebui să închideți întotdeauna lista de fonturi (chiar dacă este vorba de o listă a unei familii sau numai de fonturi în condiții de siguranță web) cu un font generic. Există cinci pe care le puteți utiliza:
- cursiv
- fantezie
- monospace
- sans-serif
- serif
Cele două exemple de mai sus pot fi modificate la:
font-family: Arial, sans-serif; font-family: Pussycat, Algerian, Broadway, fantezie;Unele nume de familie de caractere sunt două sau mai multe cuvinte
Dacă familia de fonturi pe care doriți să o utilizați este mai mult decât un singur cuvânt, atunci ar trebui să-l înconjurați cu mărci de citate dublă. În timp ce unele browsere pot citi familii de fonturi fără ghilimele, pot apărea probleme dacă spațiile albe sunt condensate sau ignorate.
font-family: "Times New Roman", serif;În acest exemplu, puteți vedea că numele de font "Times New Roman", care este multi-cuvânt, este cuprins în citate. Acest lucru îi spune browser-ului că toate aceste trei cuvinte sunt parte a acelui nume de font, spre deosebire de trei fonturi diferite, toate cu nume de un singur cuvânt.
Articolul original de Jennifer Krynin. Editat pe 12/2/16 de către Jeremy Girard