Schneller Tipp So arbeiten Sie mit @ Font-face

Aufgrund der Tatsache, dass @ font-face etwas zu kompliziert sein kann, hat es sich nicht so sehr durchgesetzt, wie es sollte. Wenn Sie erst einmal über Lizenzen, unterschiedliche Schriftformate und Browserkonsistenzen gelesen haben, kann dies potenziell mehr Probleme verursachen, als es sich lohnt.

Aber in fünf Minuten werde ich versuchen, die Arbeit mit benutzerdefinierten Schriftarten so weit wie möglich zu vereinfachen. Services wie Font Squirrel helfen dabei, die Aufgabe zum Kinderspiel zu machen!

Finales CSS

 @ font-face font-family: 'blok-regular'; src: url ('type / Blokletters-Potlood.eot'); src: local ('Blokletters Potlood Potlood'), lokal ('Blokletters-Potlood'), URL ('Typ / Blokletters-Potlood.ttf') Format ('Truetype');  @ font-face font-family: 'blok-italic'; src: url ('type / Blokletters-Balpen.eot'); src: local ('Blokletters Balpen Balpen'), lokal ('Blokletters-Balpen'), URL ('type / Blokletters-Balpen.ttf') format ('truetype');  @ font-face font-family: 'blok-heavy'; src: url ('type / Blokletters-Viltstift.eot'); src: local ("Blokletters Viltstift Viltstift"), local ("Blokletters-Viltstift"), URL ("Typ / Blokletters-Viltstift.ttf") Format ("Truetype");  h1 font-family: blok-heavy, helvetica, arial; 

Beachten Sie, wie wir auf eine .eot- und .ttf-Schriftart verweisen? Dies liegt daran, dass Internet Explorer natürlich nur ein eigenes Format verwendet, das sich erst noch durchsetzen muss. Daher müssen wir zuerst die .eot-Datei importieren und dann zu den verschiedenen Formaten für Firefox, Safari usw. wechseln. Es ist wichtig, dass Sie zuerst die .eot-Version laden.

Als Nächstes suchen wir die Schriftart auf dem Computer des Benutzers mithilfe des Attributs "local". Wenn dies nicht der Fall ist, übergeben wir nur eine URL, mit der die Schrift geladen wird.

Warum versucht der IE nicht, die TTF-Schriftarten zu laden??

Dies war definitiv ein Anliegen. Wenn der Explorer nicht mit dem Truetype-Format arbeiten kann, möchten wir keine Zeit damit verschwenden, die Schriftart herunterzuladen. Glücklicherweise versteht der IE aufgrund all dieser lokalen Attribute und der Kommas nichts davon. Daher überspringt es einfach die Zeile und verwendet nur die .eot-Version.

• Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts + RSS-Feed für die besten Webentwicklungs-Tutorials im Web.