Fonturi standard sans serif. Fonturi sigure

Una dintre sarcinile principale ale designului web este alegerea corectă fonturi standard . Servicii de încorporare a fonturilor, cum ar fi Google Web Fonturile, sau Typekit, au fost create ca o alternativă cu scopul de a oferi ceva nou.

Sunt foarte usor de folosit. Să luăm ca exemplu serviciu Google Fonturi Web.

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. Ești mulțumit de ceea ce ai ales? font frumos pentru site, iar 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ă utilizaț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 unul dintre opțiuni 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

1. 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.

1. Helvetica

Helvetica este o salvare pentru designeri. Acest font web standard funcționează aproape întotdeauna ( De macar, ca plasă de siguranță pentru alte fonturi).

1. 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. Acest versiune actualizata font Old Times.

1. 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.

1. curier nou

Similar cu Times New Roman și folosit ca o variație vechi 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.

1. Curier

Un vechi font cu lățime fixă ​​care este folosit ca rezervă pe aproape toate dispozitivele și sistemele de operare.

1. Verdana

Verdana poate fi considerată pe bună dreptate un adevărat font web ( font web adevărat) mulțumită linii simple, acționând ca serif, precum și marime mare. Literele sale sunt ușor alungite, astfel încât sunt ușor de citit pe ecran.

1. 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.

1. Palatino

Palatino datează din epoca Renașterii. Fără glume. Acesta este altul font mare, care este ideal pentru Internet. Este folosit în mod obișnuit în titluri și reclame.

1. 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 tarziu acest font a fost adoptat de alte sisteme de operare.

1. 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ă.

1. Comic Sans MS

Comic Sans MS este o alternativă distractivă pentru fonturile serif.

1. 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.

1. 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ță.

1. 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.

Fonturile sunt integrante și foarte o parte importantă designul site-ului web, subliniind individualitatea acestuia. Articolul va vorbi despre conectarea fonturilor standard la o pagină web, acestea sunt numite și fonturi de sistem, iar în articolul următor ne vom uita în detaliu la alegerea și conectarea fonturilor din Fonturi Google către site-ul WordPress.

Fonturi de sistem, standard, sigure

Orice browser afișează numai acele fonturi care sunt prezente în sistem de operare calculator. De aceea se numesc cele de sistem și sunt instalate implicit împreună cu sistemul de operare.

Și se numesc fonturi sigure, deoarece este probabil să fie afișate în browserul majorității vizitatorilor site-ului.

Dar întreaga problemă este că se instalează diferite sisteme de operare seturi diferite fonturi. Puteți vizualiza seturile de fonturi furnizate împreună cu sistemul de operare pe oficial Pagini Windows,Mac OS. Dar în Unix/Linux nu există set standard.

Pentru ca pagina de internet să fie afișată în conformitate cu ideea designerului, în CSS a fost instalată o proprietate de font numită font-family

proprietatea familiei de fonturi

Proprietatea font-family sunt familii de fonturi grupate după anumite caracteristici.

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).

În acest fel, fonturi similare din diferite sisteme de operare sunt pur și simplu selectate și conectate la pagina de Internet separate prin virgule.

Iată un exemplu, doar pentru percepția vizuală. Vom reveni la acest exemplu mai târziu când vom lua în considerare conectarea directă a fonturilor.

Doar urmați logica și totul va deveni limpede.

Corp (familie de fonturi: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; )

Să ne uităm la ce a fost scris:

• OS Windows - Arial;
• OC Mac OS - Helvetica CY;
• OC Unix/Linux - Nimbus Sans L;
• Familie generică - sans-serif.

Așa-numitele fonturi sigure

Pe baza sistemului de operare Windows, a fost compilată o listă cu mai multe fonturi sigure.

1. Arial
2. Arial Black
3. Comic Sans MS
4. curier nou
5. Georgia
6. Impact
7. Times New Roman
8. Trebuchet MS
9. Verdana

Toate aceste fonturi sunt instalate pe Mac OS X, Windows și mulți utilizatori Unix/Linux care au instalate fonturile Core pentru pachetul Web.

Pentru alți utilizatori, este oferit un tabel de corespondență. Conține fonturi similare aparținând unei anumite familii.

Tabel de corespondență și apartenența fonturilor la o anumită familie:

Windows	Mac OS	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

* Când conectați fonturi, vă puteți baza în siguranță pe ele. Tabelul acceptă caractere chirilice și alfabetul rus.
Am luat masa în sine în acest articol.

Conectarea fonturilor de sistem la site

Există mai multe moduri de a conecta fonturile de sistem la site-ul dvs. În plus, puteți conecta diferite fonturi la diferite paragrafe. Aplicați fonturi diferite cuvintelor și expresiilor individuale. Voi încerca acum să iau în considerare toate acestea.
Deci, să facem totul în ordine.

Conectarea fonturilor într-un fișier CSS

Dacă trebuie să vă conectați fontul principal pentru întregul document, trebuie doar să adăugați următorul cod în foaia de stil:

Corp (familie de fonturi: Arial, „Helvetica CY”, „Nimbus Sans L”, sans-serif; /* conectați fontul la întregul document */ dimensiunea fontului: 16px; /* setați suplimentar dimensiunea fontului */ font -greutate: 400 /* setați greutatea fontului, sau în loc de 400, setați valoarea la normal */ )

Atribuirea unui font pentru titluri H1, H2, H3, H4, H5, H6, (aici este același, doar setăm valoarea aldină pentru a evidenția titlurile):

H1,h2,h3,h4,h5,h6( familia de fonturi: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* conectați fontul la titluri */ greutatea fontului: 600; / * setați greutatea fontului sau, în loc de 600, setați valoarea la aldine */ )

Atribuim un font doar paragrafelor:

P( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* conectați fontul la paragrafe, poate fi aplicat listelor li, blocuri div, formăși alte elemente */ font-weight: normal; /* setați greutatea fontului sau, în loc de 600, setați valoarea la bold */ font-size: 16px; /* setează suplimentar dimensiunea fontului pentru paragrafe */ )

La atribuiți un font doar unui anumit paragraf, sau bloc, trebuie mai întâi să atribuiți o clasă acestui bloc în documentul HTML

Iată un paragraf cu un font personalizat

Si in Tabel CSS scrie urmatorul cod:

Font( font-family: Arial, "Helvetica CY", "Nimbus Sans L", sans-serif; /* conectăm fontul la anumite paragrafe, poate fi aplicat la liste separate li, blocuri div, forme și alte elemente */ font-weight: normal; /* setați greutatea fontului sau, în loc de 600, setați valoarea la bold */ font-size: 16px; /* setează suplimentar dimensiunea fontului pentru paragrafe */ )

Acum, pentru fiecare etichetă - element html cu class.font (numiți-l oricum doriți), fontului i se va atribui un font Arial, cu normal (400), greutate și dimensiune 16 pixeli.
În mod similar, puteți atribui diferite fonturi listelor li, tabelelor, blocurilor div întregi, cuvintelor individuale sau frazelor.

Conectarea fonturilor într-un document HTML

Fonturile sunt incluse direct într-un document HTML în același mod ca un fișier CSS, singura diferență este în sintaxă. Puteți include fonturi în antetul documentului - între etichete (similar cu un fișier CSS) sau inline - atribuirea proprietăților direct etichetelor html.

Includerea fonturilor în antet, între etichete . În acest scop în document html adauga acest cod:

Nu mă voi repeta aici. Totul este similar cu conexiunea din fișierul CSS.

Conectarea fonturilor în linie, direct la elementele site-ului. Permiteți-mi să vă dau câteva exemple:

Conectarea fontului la paragraf

Iată un paragraf cu text

Subliniem cu aldine cuvânt separatși atribuiți un font separat de cel principal

Iată un paragraf cu text și asta cuvânt, care trebuie evidențiat cu caractere aldine

Iată linkul

În mod similar, atribuim fonturi oricărei etichete html.

Dar totuși, este mai bine și recomandat să atribuiți stiluri elementelor prin fișier CSS. În primul rând, trebuie să scrieți stiluri în CSS o singură dată și apoi să atribuiți doar clasa necesară în HTML. În al doilea rând, prin scrierea stilurilor inline, se creează conținut duplicat. Aceste proprietăți și clase par să fie indexate de motoarele de căutare și am auzit că W3C vrea să desființeze complet inline. Deși uneori este mai ușor să scrii stiluri în acest fel.

Toate. Urmăriți actualizările site-ului, pregătesc un articol despre conectarea fonturilor non-standard și originale la site, astfel încât acestea să fie afișate corect în toate browserele. Vă voi prezenta și câteva servicii bune, unde puteți selecta fonturi personalizate.

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:

Bun designer, ca un bun designer de layout, știe că browserul poate folosi doar acele fonturi care sunt instalate pe computerul utilizatorului pentru a afișa pagina. Adică, fonturile pot fi împărțite în două categorii:

1. Fonturi care vor fi afișate fără probleme de marea majoritate a utilizatorilor.
2. 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ă modificaț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, faceți, de exemplu, text general Nu sunt permise pagini cu 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. Lista fonturilor standard versiuni diferite Windows poate fi găsit, de exemplu, în articolul Fonturi standard Windows și o listă de fonturi standard pentru 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 utilizatorii Linux utilizați 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 pe computer Set de bază fonturi pentru Web, pentru care până în 2002 era disponibil oficial 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ă proprietate CSS specificați mai multe fonturi, 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:

1. 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.
2. 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).
   Numele familiilor ancestrale sunt Cuvinte cheieși nu trebuie să fie î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. Întrucât se poate doar visa la o astfel de stare de lucruri, atunci Nu există fonturi absolut sigure!

Fonturi individuale poate fi numit sigur cu unele rezerve.

Baza pentru determinarea fonturilor „sigure” au fost fonturile celui mai comun sistem de operare. sisteme Windows, care sunt folosite ș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 incluse în Livrare Standard 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 de zi cu zi a textului de pe ecran și nu toată lumea îl are utilizatorii de Windows.

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 cât mai mult posibil număr mai mare utilizatori!

Citiți despre acest lucru în a doua parte a publicației.

ÎN această listă listează fonturile comune tuturor celor curente acest moment Sistemele de operare Windows (de fapt, începând cu Windows 98) și echivalentele lor î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.

Fonturile cu 2 caractere 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, iar 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)

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:

1. Fonturi care vor fi afișate fără probleme de marea majoritate a utilizatorilor.
2. 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 î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ă modificaț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. Lista fonturilor standard versiuni Windows Puteți vedea, 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:

1. 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.
2. 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”:

1. Arial
2. Arial Black
3. Comic Sans MS
4. curier nou
5. Georgia
6. Impact
7. Times New Roman
8. Trebuchet MS
9. 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, oameni destepti a inventat 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	Mac OS	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 opusă fontul înseamnă echivalente chirilice native font Windows Sistemul de operare nu are unul. 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 toate utilizatorii de Mac OS X), atunci pagina va fi afișată în acest font. Dacă utilizatorul nu are acest font, atunci pagina utilizatorului Mac OS 9 vorbitor de limbă rusă va fi afișată cu siguranță ca standard fontul 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 font CSS stive. 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. Toate cantitate mare designerii profită de această oportunitate și un designer de layout competent ar trebui să știe despre asta.

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	Mac OS	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	Mac OS	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	Mac OS	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:

1. 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
2. Stivele CSS sigure care iau în considerare suportul pentru alfabetul chirilic în fonturi pot fi găsite în articol.
3. Dacă suportul pentru alfabetul chirilic nu este important pe pagină, folosim stivele CSS din articol.