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!
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
EOT, et ironiquement qualifié:
OpenType.
Le programme
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
NET TUTS.
 |
Reste donc à proposer à Internet Explorer une version EOT de la font TTF utilisée.
|
D. Convertisseurs
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.
- Le raccourci vers la commande DOS, à ouvrir dans le repertoire ou se trouve le convertisseur:
- ttf2eot
- Le fichier "batch": ttf2eot.bat
- 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
 |
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).
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.
