În timp ce imaginile obțin o mare parte din dragoste atunci când vine vorba de site-uri web, este cuvântul scris care apelează la motoarele de căutare și transmite conținutul majorității site-urilor. Ca atare, designul tipografic este o parte importantă a designului site-ului web. Cu importanța textului unui site vine necesitatea de a se asigura că acesta arată bine și este ușor de citit. Acest lucru se face cu styling CSS (Cascading Style Sheets).
Urmând standardul modern de web design, atunci când doriți să dictați aspectul conținutului de text al unui site web, veți face acest lucru folosind CSS. Aceasta separă stilul CSS de structura HTML a unei pagini. De exemplu, dacă doriți să setați fontul unei pagini în "Arial", puteți face acest lucru adăugând următoarea regulă de stil la CSS (notă - acest lucru se va întâmpla probabil într-o foaie de stil CSS externă care împuternicește stilurile pentru fiecare pagină de pe site):
corp {font-family: Arial; }Acest font este setat pentru "corp", astfel încât cascada CSS va aplica stilul tuturor celorlalte elemente ale paginii. Acest lucru se datorează faptului că fiecare element HTML este un copil al elementului "corp", stilurile CSS precum familia de fonturi sau culoarea vor cascada de la părinte la elementul copil. Acesta va fi cazul dacă nu se adaugă un stil mai specific pentru anumite elemente. Singura problemă cu acest CSS este că este specificat doar un singur font. Dacă acest font nu poate fi găsit din vreun motiv, browserul va înlocui altul în locul său. Acest lucru este rău pentru că nu aveți control asupra fontului utilizat - browserul va alege pentru dvs. și este posibil să nu vă plac ce a decis să utilizați! Aici intră o stivă de fonturi.
Un teanc de fonturi este o listă de fonturi în declarația familiei de fonturi CSS. Fonturile sunt listate în ordinea preferinței pe care doriți să le apară pe site în cazul unei probleme ca un font care nu se încarcă. Un stiva de fonturi permite unui designer să controleze aspectul fonturilor de pe pagina web, chiar dacă calculatorul nu are fontul inițial pe care l-ați solicitat.
Deci, cum arata un teanc de caractere? Iată un exemplu:
corp {font-familie: Georgia, "Times New Roman", serif; }Există câteva lucruri de observat aici.
În primul rând, veți vedea că am separat diferitele nume de fonturi cu o virgulă. între fiecare Puteți adăuga cât mai multe fonturi pe cât doriți, atâta timp cât acestea sunt separate printr-o virgulă. Browserul va încerca să încarce mai întâi primul font specificat. Dacă aceasta nu reușește, va rula în jos rândul încercând fiecare font până când găsește una pe care o poate folosi. În acest exemplu, folosim fonturi de tip "web safe", iar "Georgia" se găsește probabil pe computerul persoanei care vizitează site-ul (notați - browserul arată pe computerul dvs. pentru fonturile specificate pe pagină, astfel încât site-ul spune computerul care fonturiază pentru încărcare din sistemul dvs.). Dacă dintr-un motiv anume că acest font nu a fost găsit, s-ar muta în jos pe stivă și să încercați următorul font specificat.
În ceea ce privește fontul următor, observați cum este scris în teanc. Numele "Times New Roman", este cuprins în ghilimele duble. Acest lucru se datorează faptului că numele fontului are mai multe cuvinte. Orice nume de fonturi cu mai mult de un cuvânt (Trebuchet MS, Courier New etc.) trebuie să aibă numele în citate dublă, astfel încât browserul să știe că toate aceste cuvinte fac parte dintr-un nume de font.
În cele din urmă, terminăm stiva fontului cu "serif", care este o clasificare generică a fontului. În cazul puțin probabil că niciunul dintre fonturile pe care le-ați numit în stack-ul dvs. nu este disponibil, browserul va găsi doar un font care se încadrează cel puțin în clasificarea corectă pe care ați ales-o. De exemplu, dacă utilizați fonturi sans-serif ca Arial și Verdana, atunci să încheiați o stivă de fonturi cu clasificarea "sans-serif" va păstra cel puțin fontul în familia generală dacă există o problemă de încărcare. Desigur, ar fi foarte rar ca un browser să nu poată găsi nici unul dintre fonturile listate în stivă și trebuie să folosească această clasificare generică, este o practică bună să o includeți oricum doar pentru a fi dublu sigură.
Stive de fonturi și Fonturi Web
Multe site-uri web utilizează astăzi fonturi web care sunt fie incluse pe site împreună cu alte resurse (cum ar fi imaginile site-ului, fișier Javascript etc.) sau legate de acestea la o locație a fonturilor în afara locației, cum ar fi Google Fonts sau Typekit. În timp ce aceste fonturi ar trebui să se încarce, deoarece vă conectați la fișierele în sine, totuși doriți să utilizați un stiluri de fonturi pentru a vă asigura că aveți un anumit control asupra oricărei probleme care ar putea apărea. Același lucru este valabil pentru fonturile "web safe" care ar trebui să fie pe computerul cuiva (rețineți că fonturile pe care le-am folosit ca exemple în acest articol, inclusiv Arial, Verdana, Georgia și Times New Roman, sunt toate fonturile pentru securitatea web care ar trebui să fie pe computerul unei persoane). Chiar dacă probabilitatea lipsei unui font este foarte scăzută, specificarea unui stilu de fonturi va ajuta cât mai mult posibil proiectarea tipografică a site-ului .
Articolul original de Jennifer Krynin. Editat de Jeremy Girard pe 8/9/17