Astuce comment travailler avec @ Font-face

Etant donné que @ font-face peut être un peu trop compliqué, il n’a pas aussi bien compris. Une fois que vous avez commencé à lire sur les licences, les différents formats de police, la cohérence du navigateur, cela peut potentiellement devenir plus de problèmes que ça ne vaut la peine.

Mais dans cinq minutes, je vais essayer de simplifier le plus possible le travail sur les polices personnalisées. Des services tels que Font Squirrel aident à simplifier la tâche!

CSS final

 @ font-face font-family: 'blok-regular'; src: url ('type / Blokletters-Potlood.eot'); src: format local ("Blokletters Potlood Potlood"), format local ("Blokletters-Potlood"), url (format "type / Blokletters-Potlood.ttf") ("type exact");  @ font-face font-family: 'blok-italic'; src: url ('type / Blokletters-Balpen.eot'); src: format local ('Blokletters Balpen Balpen'), format local ('Blokletters-Balpen'), url ('type / Blokletters-Balpen.ttf') (format 'TrueType');  @ font-face font-family: 'blok-heavy'; src: url ('type / Blokletters-Viltstift.eot'); src: format local ('Blokletters Viltstift Viltstift'), format local ('Blokletters-Viltstift'), url ('type / Blokletters-Viltstift.ttf') ('type réel');  h1 font-family: blok-heavy, helvetica, arial; 

Remarquez comment nous faisons référence à la fois aux polices .eot et .ttf? En effet, bien entendu, Internet Explorer n’utilise que son propre format, qui n’a pas encore été adopté. En tant que tel, nous devons d'abord importer ce fichier .eot, puis passer aux différents formats pour Firefox, Safari, etc.. Il est essentiel de charger d'abord la version .eot.

Ensuite, nous recherchons la police sur l'ordinateur de l'utilisateur en utilisant l'attribut "local". Si ce n'est pas possible, alors seulement nous passerons une URL qui chargera la police.

Pourquoi IE n'essaie-t-il pas de charger les polices TTF??

C'était vraiment une préoccupation. Si Explorer ne peut pas fonctionner avec le format TrueType, nous ne voulons pas perdre de temps à essayer de télécharger la police. Heureusement, à cause de tous ces attributs locaux et des virgules, IE ne les comprendra pas. En tant que tel, il sautera simplement la ligne tous ensemble, n'utilisant que la version .eot.

• Suivez-nous sur Twitter ou abonnez-vous au fil RSS Nettuts + pour obtenir les meilleurs tutoriels de développement Web sur le Web..