Cu totii stim ca tipografia este unul din cele mai importante aspecte atunci cand creezi un website.Putem sa o numim o arta caci ea s-a perfectionat pe parcursul a mai multe secole, chiar milenii.

Sursa:http://epicmedia.co/web-typography-the-invasion

La mijlocul anilor ’90, browserele au mers pe ipoteza ca un user va avea nevoie in principal de continut.Si intr-adevar au avut dreptate.Asa ca s-au axat pe tipografia unui website…dar de cum au studiat problema au si ajuns la un punct mort.Exista problema redistribuirii fonturilor pe scara larga;multe dintre acestea erau protejate prin drepturile de autor, iar altele erau disponibile numai pe anumite sisteme de operare.Asa ca la baza problema era simpla, dar esentiala…era o lupta constanta sa zicem intre autor si utilizator!In aceasta lume s-a nascut si prima versiune de CSS, CSS 1.0 care nu putem sa spunem ca a fost introdusa cu adevarat, dar a pus fundatia pentru modificarea(stilarea) tipografiei.Asa ca de la CSS 2.0 au aparut primele taguri CSS pe care le cunoastem si astazi.Dar exista inca aceeasi problema de baza!Autorii nu puteau utiliza o gama larga de fonturi fiindca nu erau compatibile cu toate browserele, dar si cu sistemele de operare.

Asa ca in 1998 a aparut o solutie eleganta la problema…sa se introduca un nou tag CSS si anume @font-face.Dar era o solutie mult prea evoluata pentru vremea ei!Nu existau inca formatele bine cunoscute ca .otf, .ttf, .woof etc.Asa ca de-abea din 2002, la introducerea pentru prima oara a termenului de @font-face in CSS3(ce aparuse ca idee inca din 1999) .Font-face este acum perfect utilizabil in browserele moderne, dar si in cele mai vechi(Ie6).

Cum introducem un font:

<html>
<head>
<style type="text/css">
p {
  font-family:Verdana, Arial, Helvetica, serif;
  font-size:16px;
  line-height:1.5;
  color:#333;
}
</style>
</head>
<body>
  <p>Un simplu paragraf...lorem ipsum dolor dit atmet consectuerum
adisciplit erit</p>
</body>
</html>

Acum sa va explic codul de mai sus…cred ca stiti cu totii ce inseamna tagurile html si head, dar haideti sa ne oprim un pic la CSS-ul din fila.Prima comanda este font-family.Acum o sa va intrebati…de ce am scris mai multe fonturi pe aceeasi linie.Este o strategie foarte eficienta, atat de eficienta incat se utilizeaza de mai bine de 10 ani.Si comanda merge astfel:

Daca userul are pe sistemul de operare fontul Verdana instalat atunci el va vedea textul in fontul verdana.Daca nu va merge la urmatorul font, Arial si va arata fontul cu acesta.Si procesul se repeta pana cand va exista un font asemanator pe sistemul de operare.

Dupa acea vin doar cateva taguri aditionale ca font-size(pentru a seta marimea fontului) si color(pentru a seta culoarea fontului).Dar acum o sa ma opresc la line-height.Acesta comanda CSS se utilizeaza cand vrem sa setam un anumit spatiu intre doua randuri diferite.Ca vom seta line-height cu minus atunci vom intercala 2 randuri diferite si vice versa.

@font-face {
   font-family: Delicious;
   src: url('Delicious-Roman.otf');
}
@font-face {
  font-family: Delicious;
  font-weight: bold;
  src: url('Delicious-Bold.otf');
}

In exemplul de mai sus puteti vedea tagul font-face.Acesta nu este chiar ceva nou, de fapt el fiind introdus din CSS2, dar din pacate nu suporta multe formate.De la aparitia formatelor ca .ttf sau .otf, aceasta comanda a prins avans si este inclus in noua serie de taguri CSS3.

In exemplul de mai sus am utilizat de 2 ori acelasi tag, dar cu o mica diferenta.In al doilea am setat si font-weight.Mai bine zis…daca ai 2 stiluri la un font si vrei sa le utilizezi concomitent vei utiliza de ori @font-face.Se observa ca in primul exemplul am Delicious-Roman.otf(pentru fontul normal) si in al doilea Delicious-Bold.otf pentru acelasi font, dar ingrosat.In primul rand, pentru a utiliza un font prin @font-face trebuie sa incarci fontul(se observa comanda src).Si apoi sa-i atribui numele, in cazul meu fiind Delicious.

Metoda de mai sus, chiar daca e eleganta si simpla de retinut nu este valida in toate browserele.Am vorbit mai sus de diferitele formate prin care se poate insera acelasi font.In browserele mai vechi, dar si in unele mai noi, trebuie adaugate anumite formate, specifice fiecarui browser(de exemplu in IE va functiona formatul .eot).

Iar acum sa modificam codul de mai sus si sa il facem compatibil in toate browserele.

/* @font-face */
@font-face {
    font-family: 'Delicious';
    src: url('Delicious-Roman.eot?') format('eot'),
         url('Delicious-Roman.woff') format('woff'),
         url('Delicious-Roman.ttf') format('truetype'),
         url('Delicious-Roman.svg#webfontKWmDqtHl') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Delicious';
    src: url('Delicious-Bold.eot?') format('eot'),
         url('Delicious-Bold.woff') format('woff'),
         url('Delicious-Bold.ttf') format('truetype'),
         url('Delicious-Bold.svg#webfontKWmDqtHl') format('svg');
    font-weight: normal;
    font-style: normal;
}

Iar acum te intrebi de unde poti face rost de aceste formate?Pai…FontSquirell este un site foarte bun, care iti ofera kit-uri @font-face.

Metoda descrisa mai sus se utilizeaza de ceva timp pentru a introduce noi fonturi moderne intr-un website.Totusi exista si alternativa prin cufon(Jquery) care e mai complicata si nu ofera cu mult mai multe avantaje.Eu v-as sugera sa utilizati @font-face in proiecte fiindca este o metoda prin care puteti aduce ceva nou la un website.

Alătură-te conversației

4 comentarii

  1. Salut, nu credeam ca sunt asa importante fonturile pana nu am citit cu atentie acest articol, totusi atata importanta unui lucru atat de mic?

  2. Stii cum e cu buturuga mica((-: Da, cred ca e foarte important, iar ca exemplu uite aici o tema WordPress tare draguta…Typominima.Fa doar un exercitiu de imaginatie(sau aplical) si elimina cufon font.Ai sa vezi ceva total diferit!

  3. Atentie cand scri articole ca informezi vizitatorul gresit. Am citit doar prima parte, nu am citit mai mult.

    TrueType is an outline font standard originally developed by Apple Computer in the late 1980s as a competitor to Adobe’s Type 1 fonts used in PostScrip

    The earliest CSS3 drafts were published in June 1999.[22]

    In rest a fost frumos articolul. 😉

Lasă un comentariu

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Send this to a friend