Snelle tip werken met @ Font-face

Vanwege het feit dat @ font-face een beetje overdreven ingewikkeld kan zijn, heeft het niet zo veel betrapt als het zou moeten. Zodra u begint te lezen over licentieverlening, verschillende lettertype-indelingen, consistentie van browsers, kan het mogelijk meer problemen opleveren dan het waard is.

Maar - binnen vijf minuten zal ik proberen het werken met aangepaste lettertypen zo veel mogelijk te vereenvoudigen. Diensten zoals Font Squirrel helpen om de klus te klaren!

Laatste CSS

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

Merk op hoe we verwijzen naar zowel een .eot als .ttf-lettertype? Dit komt omdat, natuurlijk, Internet Explorer alleen zijn eigen indeling gebruikt, die nog echt moet worden aangepakt. Als zodanig moeten we eerst dat .eot-bestand importeren en vervolgens doorgaan naar de verschillende indelingen voor Firefox, Safari, enzovoort. Het is essentieel dat u de .eot-versie eerst laadt.

Vervolgens zoeken we naar het lettertype op de computer van de gebruiker met behulp van het kenmerk "lokaal". Als het ongegrond is, pas dan geven we een url door die het lettertype zal laden.

Waarom probeert IE de TTF-lettertypen niet te laden?

Dit was absoluut een zorg. Als Explorer niet kan werken met het TrueType-formaat, willen we geen tijd verspillen aan het proberen om het lettertype te downloaden. Gelukkig zal IE, vanwege al die lokale kenmerken en de komma's, er niets van begrijpen. Als zodanig slaat het de regel gewoon helemaal over en maakt dus alleen gebruik van de .eot-versie.

• Volg ons op Twitter of abonneer je op de Nettuts + RSS Feed voor de beste tutorials voor webontwikkeling op internet.