IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)

Overdose pour Navigateurs: @font-face, box-shadow, rotate(xdeg)

Date de publication : 26 mai 2010

Par gcyrillus
 

@font-face, box-shadow, rotate, :before et :after, découvez et exploitez la puissance de CSS!

       Version PDF (Miroir)   Version hors-ligne (Miroir)
Viadeo Twitter Facebook Share on Google+        



I. @font-face, pour 90% de vos visiteurs, même pas peur!
A. Nouvelle donne
B. Présentement
C. Situation Inverse
D. Convertisseurs
E. Ce n'est pas si simple
F. Les outils que j'utilise sous windows
G. Utilisation


I. @font-face, pour 90% de vos visiteurs, même pas peur!

Ce titre de section ne se veut pas provocateur, pourtant...

N'en plaisent à certains, Internet Explorer propose depuis longtemps aux webmasters de faire usage de polices "exotiques". Enfin, disons de polices de caractères peu communes ou rares sur les ordinateurs des visiteurs.
Internet Explorer permet, via @font-face d'afficher sur une page web, une police qui n'est pas installée sur l'ordinateur du visiteur.

Internet Explorer n'accepte que des font (polices) au format en EOT, et ironiquement qualifié: OpenType.
Le programme en WEFT, de Microsoft (Ne fonctionnant donc que sous l'OS Windows), permet de créer ces fichiers de polices et impose d'indiquer des droits d'utilisation (restrictifs à un seul domaine par exemple), et c'est sans compter l'utilisation peu intuitive du programme qui finit par rendre cette possibilité quasi inexploitable.
Enfin, nos autres navigateurs, eux, ne reconnaissent pas ce type de police.


A. Nouvelle donne

Pourtant, aujourd'hui, nombre de nos navigateurs implémentent @font-face, disparue dans les specifications CSS2.1 mais qui refait surface dans la version 3. Plusieurs types de police sont utilisables, seul Internet Explorer est refractaire et n'accepte que son type de fichier EOT, Microsoft propose même d'en faire un standard!


B. Présentement

Aujourd'hui, il est aisé de proposer au navigateur de l'internaute une font de type TrueType sans que celle-ci soit obligatoirement installée sur son ordinateur, le problème de Internet Explorer (une fois de plus) qui n'accepte que son format EOT.


C. Situation Inverse

Il est possible d'afficher une police TrueType en ligne dans Opera, Safari et Firefox. Chrome est encore à la traine et Internet Explorer y est refractaire... Firefox et Internet Explorer sont les deux navigateurs les plus utilisés, si on ajoute Opera et Safari, on atteint près de 90% des visiteurs selon le site en NET TUTS.

idea Reste donc à proposer à Internet Explorer une version EOT de la font TTF utilisée.

D. Convertisseurs

Si la solution de WEFT est mal aisée, il reste la solution d'un convertisseur en ligne: en TTF to EOT Font Converter ou en FONT SQUIRREL, ce dernier ne se limite pas à ces deux type de fichiers.


E. Ce n'est pas si simple

Une fois le fichier TTF choisi et converti (avec une licence d'utilisation qui le permet), il faut encore l'afficher et le tester. Si la police TrueType passe sans problème pour les caractères normaux, ceci est moins évident pour le fichier OpenType converti a la volée.


F. Les outils que j'utilise sous windows

Pour rendre un peu plus confortable la conversion et les tests de rendu dans Internet Explorer, je me sers d'un raccourci vers la commande DOS, d'un fichier "batch", qui lance un convertisseur en local puis une page HTML de test dans Internet explorer.

  1. Le raccourci vers la commande DOS, à ouvrir dans le repertoire ou se trouve le convertisseur:

  2. ttf2eot
  3. Le fichier "batch": ttf2eot.bat
  4. Le fichier HTML de test: test.html

G. Utilisation

1. Placer dans un repertoire les fichiers:

  • Raccourci vers cmd.exe
  • ttf2eot.exe
  • ttf2eot.bat
  • test.html
2. Créer un sous-repertoire 'font'.

3. Placer dans ce sous-repertoire les polices TTf que vous voulez convertir et tester.

4. Lancer le raccourci vers cmd.

5. Dans la fenetre DOS ouverte, lancer le fichier "batch" en ligne de commande: ttf2eot.bat nom_fonte_a_convertir nom_fonte_convertie

warning Ne pas oublier de donner le nom du fichier TTF à convertir et optionnellement un nom pour le fichier EOT.
6. Le batch se deroule en 3 étapes:

  • Dès la première, les fichiers à tester sont créés (Vous pouvez dés ce moment fermer la fenêtre DOS);
  • La seconde étape affiche un exemple des règles CSS à utiliser;
  • La troisième étape lance Internet Explorer pour ouvrir le fichier 'test.html' (Fermer la fenetre avant cette étape si Internet Explorer est déja ouvert sur le fichier de test, il ne vous reste q'à rafraîchir la page du navigateur).


               Version PDF (Miroir)   Version hors-ligne (Miroir)

Valid XHTML 1.0 TransitionalValid CSS!

Copyright © 2010 Cyrille Griboval . Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.