Când începeți să creați un aspect, trebuie să specificați în mod specific în CSS fonturile folosite pe pagină. Adesea, în diferite fonturi, designerul tastează nu numai textul principal al paginii, ci și diferite titluri, logo-uri și monograme:
Un designer bun, ca un bun designer de layout, știe că browserul poate folosi doar acele fonturi care sunt instalate pe computerul utilizatorului pentru a afișa o pagină. Adică, fonturile pot fi împărțite în două categorii:
- Fonturi care vor fi afișate fără probleme de marea majoritate a utilizatorilor.
- Fonturi pe care un grup destul de mare de utilizatori nu le are.
Dacă designerul a folosit fonturi din a doua categorie pentru a crea, de exemplu, un logo sau titluri statice mari, nu puteți ezita să folosiți tehnica. Dezavantajul utilizării acestei tehnici este inflexibilitatea. Dacă există modificări în text, va trebui să refaceți imaginea și să schimbați CSS-ul (de exemplu, dacă dimensiunile noii imagini nu se potrivesc cu cea veche).
Putem spune că pericolul utilizării unei tehnici depinde în mod direct de probabilitatea modificării textului. Prin urmare, de exemplu, textul general al unei pagini nu poate fi scris în fonturi non-standard! Un designer competent nu ar face niciodată asta. Și dacă designerul dă peste unul verde, un bun designer de layout este pur și simplu obligat să-și corecteze greșeala - în aspect, înlocuiți acest font cu cel mai asemănător standard.
Dar cum se pot distinge fonturile primului grup de al doilea? Este clar că nu te poți baza pe un set de fonturi instalate direct pe computer! Să ne dăm seama.
Fonturi standard
Fonturile standard sunt un set de fonturi care sunt instalate împreună cu sistemul de operare. Deoarece sistemele de operare sunt diferite, setul lor de fonturi este diferit. O listă de fonturi standard pentru diferite versiuni de Windows poate fi găsită, de exemplu, în articolul Fonturi standard Windows și o listă de fonturi standard Mac OS pe pagina Fonturi incluse cu Mac OS. În ceea ce privește sistemele de operare Unix/Linux, acestea nu au un singur set de fonturi. Mulți utilizatori Linux folosesc setul de fonturi DejaVu, în special pe Ubuntu, acestea sunt instalate implicit. Conform statisticilor de la http://www.codestyle.org, mulți utilizatori Unix/Linux au instalate și URW, Free și alte seturi de fonturi. Conform acelorași statistici, mai mult de 60% dintre utilizatorii Unix/Linux au fonturi din setul de fonturi Core pentru Web pe computerul lor, care până în 2002 era disponibil oficial pentru descărcare gratuită pe site-ul Microsoft.
Pentru ca pagina să fie afișată așa cum a intenționat designerul, pe orice sistem de operare, este posibil să specificați mai multe fonturi în proprietatea CSS, separate prin virgule.
Această proprietate specifică o listă cu priorități de nume de familie de fonturi și/sau nume de familie generice. Conform specificației CSS2, există două tipuri de nume de familie de fonturi:
- Numele familiei fonturilor la alegere. De exemplu, „Times new Roman”, „Arial” și altele. Numele de familie de fonturi care conțin spații trebuie să fie cuprinse între ghilimele. Dacă ghilimele lipsesc, orice caractere de spațiu înainte și după numele fontului sunt ignorate și orice secvență de spații din numele fontului este convertită într-un singur spațiu.
- Familie generică (comună). Specificația definește următoarele familii generice:
- serif - fonturi cu serif la capete;
- sans-serif - fonturi sans-serif;
- cursive — fonturi italice;
- fantasy - fonturi decorative;
- monospace - font monospace (cu litere de aceeași lățime).
Astfel, pentru proiectare, este luat un font standard de la OS Windows, este selectat unul similar pentru Mac OS și Unix/Linux, este specificată o familie de fonturi comună și ați terminat.
Dar nu este atât de simplu. Să săpăm mai detaliat.
Caut fonturi sigure pentru web
Pe Internet, conceptul de fonturi Web „sigure” s-a dezvoltat istoric. Un font sigur este un font care este standard pentru toate sistemele de operare. Întrucât se poate doar visa la o astfel de stare de lucruri, atunci Nu există fonturi absolut sigure!
Unele fonturi pot fi numite sigure cu unele rezerve.
Baza pentru definirea fonturilor „sigure” au fost fonturile celui mai comun sistem de operare Windows, care sunt utilizate și în alte sisteme de operare. Un exemplu de astfel de utilizare îl reprezintă fonturile Core pentru pachetul de fonturi Web, care, conform statisticilor, au fost descărcate de mulți utilizatori Unix/Linux.
Acest pachet include următoarele fonturi: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Toate suportă alfabetul chirilic, care este important pentru Runet.
Setul de fonturi care vine standard cu Mac OS X (acest sistem de operare este cel mai utilizat între utilizatorii de Mac OS) include toate fonturile din setul de fonturi Core pentru Web.
Astfel, pe baza fonturilor Windows utilizate în alte sisteme de operare, s-a format următoarea listă de așa-numite fonturi Web „sigure”:
- Arial
- Arial Black
- Comic Sans MS
- curier nou
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Fontul Webdings conține pictograme și nu poate fi folosit pentru conținut. Andale Mono nu este utilizat pe scară largă deoarece nu este potrivit pentru citirea zilnică a ecranului și nu toți utilizatorii de Windows îl au.
Fiecare utilizator de Windows, Mac OS X și marea majoritate a utilizatorilor Unix/Linux (adică cei care au instalat fonturile Core pentru pachetul Web) au toate aceste fonturi.
Dar ce rămâne cu restul? La urma urmei, vrei ca planul designerului să fie văzut de cât mai mulți utilizatori!
Citiți despre asta în a doua parte a publicației.
Când începeți să creați un aspect, trebuie să specificați în mod specific în CSS fonturile folosite pe pagină. Adesea, în diferite fonturi, designerul tastează nu numai textul principal al paginii, ci și diferite titluri, logo-uri și monograme.
Un designer bun, ca un bun designer de layout, știe că browserul poate folosi doar acele fonturi care sunt instalate pe computerul utilizatorului pentru a afișa o pagină. Adică, fonturile pot fi împărțite în două categorii:
- Fonturi care vor fi afișate fără probleme de marea majoritate a utilizatorilor.
- Fonturi pe care un grup destul de mare de utilizatori nu le are.
Dacă designerul a folosit fonturi din a doua categorie pentru a crea, de exemplu, un logo sau titluri mari statice, nu puteți ezita să folosiți tehnica înlocuirii textului cu o imagine. Dezavantajul utilizării acestei tehnici este inflexibilitatea. Dacă există modificări în text, va trebui să refaceți imaginea și să schimbați CSS-ul (de exemplu, dacă dimensiunile noii imagini nu se potrivesc cu cea veche).
Putem spune că pericolul utilizării unei tehnici depinde în mod direct de probabilitatea modificării textului. Prin urmare, de exemplu, textul general al unei pagini nu poate fi scris în fonturi non-standard! Un designer competent nu ar face niciodată asta. Și dacă designerul dă peste unul verde, un bun designer de layout este pur și simplu obligat să-și corecteze greșeala - în aspect, înlocuiți acest font cu unul standard cel mai asemănător.
Dar cum se pot distinge fonturile primului grup de al doilea? Este clar că nu te poți baza pe un set de fonturi instalate direct pe computer! Să ne dăm seama.
Fonturi standard
Fonturile standard sunt un set de fonturi care sunt instalate împreună cu sistemul de operare. Deoarece sistemele de operare sunt diferite, setul lor de fonturi este diferit. O listă de fonturi standard pentru diferite versiuni de Windows poate fi găsită, de exemplu, în articolul Fonturi standard Windows și o listă de fonturi standard Mac OS pe pagina Fonturi incluse cu Mac OS. În ceea ce privește sistemele de operare Unix/Linux, acestea nu au un singur set de fonturi. Mulți utilizatori Linux folosesc setul de fonturi DejaVu, în special pe Ubuntu, sunt instalați implicit. Conform statisticilor de la http://www.codestyle.org, mulți utilizatori Unix/Linux au instalate și URW, Free și alte seturi de fonturi. Conform acelorași statistici, mai mult de 60% dintre utilizatorii Unix/Linux au fonturi din setul de fonturi Core pentru Web pe computerul lor, care până în 2002 era disponibil oficial pentru descărcare gratuită pe site-ul Microsoft.
Pentru ca pagina să fie afișată așa cum a intenționat designerul pe orice sistem de operare, este posibil să specificați mai multe fonturi în proprietatea CSS font-family, listate separate prin virgule.
Această proprietate specifică o listă cu priorități de nume de familie de fonturi și/sau nume de familie generice. Conform specificației CSS2, există două tipuri de nume de familie de fonturi:
- Numele familiei fonturilor la alegere. De exemplu, „Times new Roman”, „Arial” și altele. Numele de familie de fonturi care conțin spații trebuie să fie cuprinse între ghilimele. Dacă ghilimele lipsesc, orice caractere de spațiu înainte și după numele fontului sunt ignorate și orice secvență de spații din numele fontului este convertită într-un singur spațiu.
- Familie generică (comună). Specificația definește următoarele familii generice:
- serif - fonturi cu serif la capete;
- sans-serif - fonturi sans-serif;
- fonturi cursive - cursive;
- fantasy - fonturi decorative;
- monospace - font monospace (cu litere de aceeași lățime).
Numele de familie de clan sunt cuvinte cheie și nu trebuie să fie incluse între ghilimele.
Astfel, pentru proiectare, este luat un font standard de la OS Windows, este selectat unul similar pentru Mac OS și Unix/Linux, este specificată o familie de fonturi comună și ați terminat.
Dar nu este atât de simplu. Să săpăm mai detaliat.
Caut fonturi sigure pentru web
Pe Internet, conceptul de fonturi Web „sigure” s-a dezvoltat istoric. Un font sigur este un font care este standard pentru toate sistemele de operare. Deoarece nu putem decât să visăm la o astfel de stare de lucruri, nu există fonturi absolut sigure!
Unele fonturi pot fi numite sigure cu unele rezerve.
Baza pentru definirea fonturilor „sigure” au fost fonturile celui mai comun sistem de operare Windows, care sunt utilizate și în alte sisteme de operare. Un exemplu de astfel de utilizare îl reprezintă fonturile Core pentru pachetul de fonturi Web, care, conform statisticilor, au fost descărcate de mulți utilizatori Unix/Linux.
Acest pachet include următoarele fonturi: Andale Mono, Arial Black, Arial, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana, Webdings. Toate suportă alfabetul chirilic, care este important pentru Runet.
Setul de fonturi care vine standard cu Mac OS X (acest sistem de operare este cel mai utilizat între utilizatorii de Mac OS) include toate fonturile din setul de fonturi Core pentru Web.
Astfel, pe baza fonturilor Windows utilizate în alte sisteme de operare, s-a format următoarea listă de așa-numite fonturi Web „sigure”:
- Arial
- Arial Black
- Comic Sans MS
- curier nou
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
Fontul Webdings conține pictograme și nu poate fi folosit pentru conținut. Andale Mono nu este utilizat pe scară largă deoarece nu este potrivit pentru citirea zilnică a ecranului și nu toți utilizatorii de Windows îl au.
Fiecare utilizator de Windows, Mac OS X și marea majoritate a utilizatorilor Unix/Linux (adică cei care au instalat fonturile Core pentru pachetul Web) au toate aceste fonturi.
Dar ce rămâne cu restul? La urma urmei, vrei ca planul designerului să fie văzut de cât mai mulți utilizatori!
Fonturi care acceptă chirilic
O caracteristică specifică a RuNet este problema cu codificările paginilor și suportul pentru fonturi chirilice. Pentru a evita problemele cu diferite codificări de caractere, oamenii deștepți au venit cu Unicode, care vă permite să combinați caractere din mai multe limbi într-un singur font. Astfel, pentru paginile în limba rusă trebuie să utilizați doar fonturi Unicode care acceptă chirilica.
Mai jos este un tabel cu corespondențele fonturilor.
| Windows | MacOS | Unix/Linux | familie ancestrală |
|---|---|---|---|
| Arial Black | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
| Arial | Helvetica C.Y. | Nimbus Sans L | Sans-serif |
| Comic Sans MS | Monaco CY | * (vezi mai jos) | cursiv |
| curier nou | * (vezi mai jos) | Nimbus Mono L | Monospațiu |
| Georgia | * (vezi mai jos) | Cartea școlară a secolului L | Serif |
| Impact | Cărbune C.Y. | * (vezi mai jos) | Sans-serif |
| Times New Roman | Times C.Y. | Nimbus Roman No9 L | Serif |
| Trebuchet MS | Helvetica C.Y. | * (vezi mai jos) | Sans-serif |
| Verdana | Geneva C.Y. | DejaVu Sans | Sans-serif |
* în coloana de lângă font înseamnă că sistemul de operare nu are echivalente chirilice native ale fontului Windows. Dar, în același timp, există o mare probabilitate ca acest font în sine să fie instalat direct în sistemul de operare.
De exemplu, dacă textul principal al aspectului este Arial, găsim acest font în tabel și scriem linia corespunzătoare în CSS:
body (familie de fonturi: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )
corp( font - familie: Arial, "Helvetica CY", "Nimbus Sans L", sans - serif; |
Această intrare înseamnă că dacă utilizatorul are fontul Arial (și toți utilizatorii Windows și toți utilizatorii Mac OS X îl au), atunci pagina va fi afișată în acest font. Dacă utilizatorul nu are acest font, atunci pagina unui utilizator Mac OS 9 vorbitor de limbă rusă va fi afișată cu precizie în fontul standard de sistem Helvetica CY, iar pentru un utilizator Unix/Linux va fi afișată în fontul Nimbus Sans L , care este instalat pe 90% dintre utilizatorii Unix/Linux. Dacă utilizatorul Unix/Linux este în 10% care nu are acest font, atunci pagina va fi afișată în fontul serif care este setat implicit pentru vizualizarea paginilor Web.
Pe lângă faptul că tabelul ia în considerare fonturile Unix/Linux, există și o pictogramă CY ciudată după Helvetica obișnuită. Să ne dăm seama ce este!
Înainte de lansarea Mac OS X, această linie avea următorul sens: pentru utilizatorii de Windows, afișăm pagina în Arial, pentru utilizatorii de Mac OS 9, în fontul standard Helvetica, iar pentru restul, vedem pagina în sistem font sans-serif, care este configurat implicit în browser. Dar din nou, o nuanță importantă! Fontul standard Mac OS 9 Helvetica nu are chirilic! Pentru pagina în limba rusă, asta a însemnat următoarele: pentru utilizatorii de Windows afișăm pagina Arial, pentru utilizatorii de Mac OS 9 - în fontul standard Helvetica, care afișează informații de necitit, iar restul vezi pagina cu sistemul sans-serif font configurat implicit în browser.
Pentru a afișa corect acest set pentru utilizatorii Mac OS 9, în loc de Helvetica necirilizată, este logic să specificați același font standard Mac OS 9 Helvetica CY, care conține chirilic.
Citirea riglelor s-a schimbat de la lansarea Mac OS X. Există acum un font standard comun specificat pentru Windows/Mac OS X. Și dacă dorim ca utilizatorii de Mac OS 9 să poată vedea intenția designerului, trebuie să includem un font care conține chirilic în linia de font.
Deci, deși nu există fonturi sigure, există familii sigure de fonturi. Se mai numesc si ei stive de fonturi CSS. Pe lângă fonturile standard Windows/Mac OS X, aceste linii pot include și fonturi echivalente din setul standard de Mac OS 9 (care nu conține fonturi „sigure” în mod implicit) și fonturi comune Unix/Linux.
Orice designer de layout, mai devreme sau mai târziu, întâlnește un moment în care un designer folosește un font într-un aspect care nu este inclus în lista de fonturi „sigure”; Dar acesta nu este încă un motiv să tragă un semnal de alarmă! De exemplu, designerii folosesc foarte des fontul Tahoma pe machete, care nu este inclus în această listă. O linie de fonturi construită corespunzător deschide posibilitatea de a utiliza nu numai Tahoma, ci și alte fonturi. Un număr tot mai mare de designeri profită de această oportunitate, iar un designer de layout competent ar trebui să știe despre acest lucru.
Mai jos este un tabel suplimentar de fonturi care nu sunt incluse în lista de fonturi „sigure”, dar care pot fi utilizate în machete.
| Windows | MacOS | familie ancestrală |
|---|---|---|
| Consola Lucida | Monaco | Monospațiu |
| Lucida Sans Unicode | Lucida Grande | Sans-serif |
| Tahoma | Geneva C.Y. | Sans-serif |
Ce se întâmplă dacă nu există alfabet chirilic?
Pentru textele în limba engleză, tabelele de mai sus au un aspect ușor diferit.
| Windows | MacOS | Unix/Linux | familie ancestrală |
|---|---|---|---|
| Arial Black | Gadget | Nimbus Sans L | Sans-serif |
| Arial | Helvetica | Nimbus Sans L | Sans-serif |
| Comic Sans MS | Monaco | TSCu_Comic | cursiv |
| curier nou | Curier | Nimbus Mono L | Monospațiu |
| Georgia | * (vezi mai jos) | Cartea școlară a secolului L | Serif |
| Impact | Cărbune | Rekha | Sans-serif |
| Times New Roman | Times | Nimbus Roman No9 L | Serif |
| Trebuchet MS | Helvetica | Garuda | Sans-serif |
| Verdana | Geneva | DejaVu Sans | Sans-serif |
Pentru fonturile Arial, Courier New și Times New Roman, atunci când creați rigle, este mai bine să specificați mai întâi fontul Unix/Linux și apoi fontul Mac OS. Acest lucru se datorează unei strâmbe a setului de fonturi de bază Linux X11.
Fonturile care nu sunt incluse în lista „sigure”, dar pot fi folosite în machete, sunt mai bine definite de stivele de fonturi CSS pe baza acestui tabel.
| Windows | MacOS | Unix/Linux | familie ancestrală |
|---|---|---|---|
| Consola Lucida | Monaco | - | Monospațiu |
| Lucida Sans Unicode | Lucida Grande | Garuda | Sans-serif |
| Linotipul Palatino | Palatino | Garuda** | Sans-serif |
| Tahoma | Geneva | Kalimati | Sans-serif |
O liniuță în coloana Unix/Linux indică faptul că utilizatorii acestor sisteme de operare vor vedea cel mai probabil fontul implicit pe pagină.
** În această linie, are sens să plasați fontul Garuda înainte de Palatino (vezi explicația de mai sus).
Concluzii:
- Nu există fonturi absolut sigure. Următoarele fonturi pot fi considerate sigure condiționat:
- Arial
- Arial Black
- Comic Sans MS
- curier nou
- Georgia
- Impact
- Times New Roman
- Trebuchet MS
- Verdana
- Stivele CSS sigure care iau în considerare suportul pentru chirilic în fonturi pot fi găsite în articol.
- Dacă suportul pentru alfabetul chirilic nu este important pe pagină, folosim stivele CSS din articol.
Una dintre sarcinile principale ale designului web este alegerea corectă fonturi standard. Serviciile de încorporare a fonturilor precum Google Web Fonts sau Typekit au fost create ca alternativă cu scopul de a oferi ceva nou.
Sunt foarte usor de folosit. Să luăm Google Web Fonts ca exemplu.
Alegeți fontul Open Sans, Droid Serif sau Lato. Scrieți codul și inserați-l în element document HTML. Ești gata să-l faci referire în CSS! Întregul proces nu a durat mai mult de 60 de secunde. Și totul este complet gratuit.
Ce ar putea fi în neregulă?
Este posibil ca unele fonturi să nu fie disponibile pentru toată lumea. Și asta înseamnă că pot apărea probleme. Sunteți fericit că ați ales un font frumos pentru site, dar vizitatorul paginii web vede în schimb o scriere urâtă.
Acest lucru nu se va întâmpla dacă implementați o opțiune de rezervă.
Cât de important este să folosiți fonturi web sigure?
Fiecare dispozitiv are propriul set de fonturi preinstalate. Care depinde de sistemul de operare. Problema este că există mici diferențe între ele.
Dar site-urile web? Ca acesta? Este posibil ca fontul pe care îl vedeți să nu fie cel care a fost specificat inițial pentru site.
Ce înseamnă? Să presupunem că designerul a ales o familie de fonturi plătite pentru site. Dacă nu le aveți instalate și nu sunt furnizate de un serviciu web special, atunci fontul pe care îl vedeți este una dintre opțiunile standard. De exemplu, Times New Roman.
Prin urmare, textul de pe ecran poate arăta pur și simplu groaznic.
Si aici fonturi standard pentru site disponibil pe toate sistemele de operare. Aceasta este o mică colecție disponibilă pe Windows, Mac, Google, precum și pe Unix și Linux.
Cu ajutorul acestei selecții, designerii, precum și proprietarii de site-uri web, pot specifica ce font ar trebui să fie folosit ca font de rezervă. Acest lucru vă oferă posibilitatea de a controla modul în care va arăta pagina pe diferite dispozitive.
Ca opțiune de rezervă, dezvoltatorul selectează un font care este foarte asemănător cu cel original și acesta este cel care va fi afișat utilizatorului.
Să aruncăm o privire la o selecție dintre cele mai populare fonturi standard HTML.
15 cele mai bune fonturi sigure pentru web
Arial
Considerat standard în majoritatea cazurilor. Cel mai comun font " sans serif"sau fonturi sans serif ( care nu au serif la capetele literelor). Este adesea folosit în Windows pentru a înlocui alte caractere.
Helvetica
Helvetica este o salvare pentru designeri. Acest font web standard funcționează aproape întotdeauna ( cel puțin ca plasă de siguranță pentru alte fonturi).
Times New Roman
Are același rol pentru fonturile serif ca și Arial pentru fonturile sans serif. Este una dintre cele mai populare de pe Dispozitive Windows. Aceasta este o versiune actualizată a vechiului font Times.
Times
CSS font standard The Times este familiar celor mai mulți. Mulți oameni își amintesc de el cu litere mici în coloane înguste ale ziarelor vechi. Cel mai comun tip de imprimare care a devenit o tradiție.
curier nou
Similar cu Times New Roman și folosit ca o variație a vechilor clasici. De asemenea, este considerat un font monospațial. Spre deosebire de fonturile serif și sans serif, toate caracterele sale au aceeași lățime.
Curier
Un vechi font cu lățime fixă care este folosit ca alternativă pe aproape toate dispozitivele și sistemele de operare.
Verdana
Verdana poate fi considerată pe bună dreptate un adevărat font web ( font web adevărat) datorită liniilor simple care acționează ca serif, precum și unei dimensiuni mari. Literele sale sunt ușor alungite, astfel încât sunt ușor de citit pe ecran.
Georgia
Fontul web standard Georgia este similar ca formă și dimensiune cu fontul Verdana. Caracterele sale sunt mai mari decât alte fonturi de aceeași dimensiune. Dar este mai bine să nu-l folosești în combinație cu altele. Același Times New Roman arată ca un pitic în comparație.
Palatino
Palatino datează din epoca Renașterii. Fără glume. Acesta este un alt font mare care este perfect pentru web. Este folosit în mod obișnuit în titluri și reclame.
Garamond
Un alt font antic care a apărut în secolul al XVI-lea la Paris. Versiunea sa nouă și îmbunătățită vine standard pe majoritatea dispozitivelor Windows. Mai târziu, acest font a fost adoptat de alte sisteme de operare.
Bookman
Bookman ( sau Bookman Old Style) - unul dintre cele mai bune fonturi standard pentru titluri. Caracteristica sa caracteristică este lizibilitatea chiar și atunci când se utilizează o dimensiune mică.
Comic Sans MS
Comic Sans MS este o alternativă distractivă pentru fonturile serif.
Trebuchet MS
Acesta este un font cu tematică medievală dezvoltat inițial de Microsoft la mijlocul anilor nouăzeci. A fost folosit în Windows XP. Astăzi, este folosit pentru a compune textul principal.
Arial Black
Analogic font standard pentru site Arial. Adevărat, este mai mare, mai gros și mai dur. Proporțiile sale sunt similare cu fontul Helvetica. Și este important. Ei pot înlocuiți cu succes Helvetica fără a fi nevoie să cumpărați o licență.
Impact
Un alt font grozav pentru evidențierea titlurilor. Funcționează bine într-o frază scurtă constând din mai multe cuvinte, precum și în propoziții lungi.
Această listă conține fonturi comune tuturor sistemelor de operare Windows actuale (de fapt, începând cu Windows 98) și echivalentele acestora în Mac OS. Astfel de fonturi sunt uneori numite „fonturi sigure pentru browser” ( fonturi sigure pentru browser). Aceasta este o mică carte de referință pe care o folosesc când fac pagini Web și cred că vă va fi de folos și vouă.Dacă sunteți nou în design web, este posibil să vă gândiți ceva de genul: „De ce ar trebui să mă limitez la un set atât de mic de fonturi? Am o colecție imensă de fonturi frumoase!” Faptul este că browserul vizitatorului poate afișa doar acele fonturi care sunt instalate în a lui sistem de operare ( aproximativ traducător:În prezent, este deja posibil să utilizați practic orice fonturi atunci când proiectați pagini și noua sa proprietate @font-face; totuși, nu toate browserele acceptă încă această funcție), ceea ce înseamnă că fiecare vizitatorul paginii dvs. trebuie să fie proprietarul fonturilor pe care le-ați ales. Prin urmare, ar trebui să utilizați doar fonturi care sunt disponibile pe fiecare sistem de operare. Din fericire, CSS are o proprietate @familie de fonturi, ceea ce face această sarcină mai ușoară.
Listă
| @font-family sens | Windows | Mac | Familie |
|---|---|---|---|
| Arial, Helvetica, sans-serif | Arial | Arial, Helvetica | sans-serif |
| „Arial Black”, Gadget, sans-serif | Arial Black | Arial Black, Gadget | sans-serif |
| „Comic Sans MS”, cursiv | Comic Sans MS | Comic Sans MS 5 | cursiv |
| „Courier New”, Courier, monospace | curier nou | Courier New, Courier 6 | monospațial |
| Georgia, Serif | Georgia 1 | Georgia | serif |
| Impact, cărbune, sans-serif | Impact | Impact 5, cărbune 6 | sans-serif |
| „Consola Lucida”, Monaco, monospace | Consola Lucida | Monaco 5 | monospațial |
| „Lucida Sans Unicode”, „Lucida Grande”, sans-serif | Lucida Sans Unicode | Lucida Grande | sans-serif |
| „Palatino Linotype”, „Book Antiqua”, Palatino, serif | Palatino Linotype, Cartea Antiqua 3 | Palatino 6 | serif |
| Tahoma, Geneva, sans-serif | Tahoma | Geneva | sans-serif |
| „Times New Roman”, Times, serif | Times New Roman | Times | serif |
| „Trebuchet MS”, Helvetica, sans-serif | Trebuchet MS 1 | Helvetica | sans-serif |
| Verdana, Geneva, sans-serif | Verdana | Verdana, Geneva | sans-serif |
| Simbol | Simbolul 2 | Simbolul 2 | - |
| Webdings | Webding-uri 2 | Webding-uri 2 | - |
| Wingdings, „Zapf Dingbats” | Aripile 2 | Zapf Dingbats 2 | - |
| „MS Sans Serif”, Geneva, sans-serif | MS Sans Serif 4 | Geneva | sans-serif |
| „MS Serif”, „New York”, serif | MS Serif 4 | New York 6 | serif |
1 Fonturile Georgia și Trebuchet MS sunt livrate cu Windows 2000/XP și sunt incluse în pachetul de fonturi IE (și chiar vin cu multe aplicații Microsoft), așa că sunt instalate pe multe computere cu Windows 98.
2 Fonturile simbol sunt afișate numai în Internet Explorer, în alte browsere, acestea sunt de obicei înlocuite cu un font standard (deși, de exemplu, fontul Symbol este afișat în Opera și Webdings în Safari).
3 Fontul Book Antiqua este aproape identic cu Palatino Linotype; Palatino Linotype vine cu Windows 2000/XP, iar Book Antiqua vine cu Windows 98.
4 Vă rugăm să rețineți că aceste fonturi nu sunt TrueType, ci bitmap, deci pot arăta prost la unele dimensiuni (sunt concepute pentru a fi afișate la 8, 10, 12, 14, 18 și 24 pt la 96 DPI).
5 Aceste fonturi funcționează numai în Safari în stil standard, dar nu funcționează în aldine sau cursive. Comic Sans MS lucrează și cu caractere aldine, dar nu și cu caractere cursive. Alte browsere Mac par să fie bine emulând proprietățile fontului lipsă de la sine (mulțumesc lui Christian Fecteau pentru sfat).
6 Aceste fonturi sunt instalate pe Mac numai cu instalarea clasică
Capturi de ecran
- Mac OS X 10.4.8, Firefox 2.0, ClearType activat (mulțumesc lui Juris Vecvanags pentru captură de ecran)
- Mac OS X 10.4.4, Firefox 1.5, ClearType activat
- Mac OS X 10.4.11, Safari 3.0.4, ClearType activat (mulțumesc lui Nolan Gladius pentru captură de ecran)
- Mac OS X 10.4.4, Safari 2.0.3, ClearType activat (mulțumesc lui Eric Zavesky pentru captură de ecran)
- Windows Vista, Internet Explorer 7, ClearType activat
- Windows Vista, Firefox 2.0, ClearType activat (mulțumesc lui Michiel Bijl pentru captură de ecran)
