Sfat rapid Cum să lucrați cu @ Font-face

Datorită faptului că @ font-face poate fi un pic prea complicat, nu a prins pe cât de mult ar trebui. Odată ce începeți să citiți despre licențiere, formate diferite de fonturi, consistențe ale browserului, acesta poate deveni potențial mai mult decât merită.

Dar, în cinci minute, voi încerca să simplific procesul de lucru cu fonturi personalizate cât pot de mult. Servicii cum ar fi Font Squirrel ajuta la a face sarcina un cinch!

CSS finală

 @ font-face font-family: "bloc-regular"; src: url ('tip / Blokletters-Potlood.eot'); src: local ('Blokletters Potlood Potlood'), local ('Blokletters-Potlood'), url ('type / Blokletters-Potlood.ttf') format ('truetype');  @ font-face font-family: "bloc-italic"; src: url ('tip / Blokletters-Balpen.eot'); src: local (Blokletters Balpen Balpen), local (Blokletters-Balpen), url (tip / Blokletters-Balpen.ttf) format ("truetype");  @ font-face font-family: "bloc-heavy"; src: url ('tip / Blokletters-Viltstift.eot'); src: local (Blokletters Viltstift Viltstift), local (Blokletters-Viltstift), url (tip / Blokletters-Viltstift.ttf) format ("truetype");  h1 font-family: bloc-greu, helvetica, arial; 

Observați cum facem referire atât la un font .eot cât și la un font .ttf? Acest lucru se datorează faptului că, desigur, Internet Explorer folosește numai propriul format, care totuși nu trebuie să-l prindă. Ca atare, trebuie mai întâi să importăm fișierul .eot, apoi să trecem la diferitele formate pentru Firefox, Safari, etc. Este esențial să încărcați mai întâi versiunea .et.

Apoi, căutăm fontul pe computerul utilizatorului utilizând atributul "local". Dacă este neîntemeiat, numai atunci vom trece o adresă URL care va încărca fontul.

De ce nu încerc să încărc Fonturile TTF?

Aceasta a fost cu siguranță o preocupare. Dacă Explorer nu poate funcționa cu formatul de tip truetype, nu vrem să pierdem timpul încercând să descarcăm fontul. Din fericire, din cauza tuturor atributelor locale și a virgulelor, IE nu va înțelege nimic din ele. Ca atare, aceasta va trece pur și simplu linia toate împreună, astfel, folosind doar versiunea .eot.

• Urmați-ne pe Twitter sau abonați la Nettuts + RSS Feed pentru cele mai bune tutoriale de dezvoltare web de pe web.