Gestion de Contenu, de Communauté et de groupes de travail collaboratif - Open Source, français, sécurisé, stable et performant

Comment utiliser des polices "Speciales" sur son site et pourquoi faire ? Lors de la création d'un site web, le choix des polices est assez limité puisqu'il est réduit aux polices dites standard, c'est-à-dire celles qui sont installées par défaut avec l'OS. Bien sûr, lorsqu'on précise la police à utiliser, on en propose plusieurs autres ainsi qu'une générique afin de pallier l'absence éventuelle de cette police. Pour afficher quand même nos belles lettres, on crée des images contenant du texte en local. En fait on crée des boutons en général. Ainsi, on a le choix entre toutes les polices de notre machine et le visiteur de votre site verra exactement la même chose que nous.(Ce sont des images c'est normal !) Mais cette technique ne peut hélas s'étendre à autre chose qu'aux titres de pages, aux menus et éventuellement à de petits textes (et encore...) à cause du temps de telechargement de ces images. Avec NPDS on voit se développer de plus en plus des menus constitués directement de texte, des hyperliens. Pourquoi ? Parce que c'est ultra rapide d'afficher du texte, et surtout que c'est gérable dynamiquement. On peut le modifier tres simplement, une image, elle, est fixe. Il y a donc 2 interets à avoir sa propre police: Faire de beaux textes, et faire de beaux boutons rapidement. .....Oui mais COMMENT ?

Inclure une police dans notre site web.

Cette technique porte le doux nom de font !!embed!!ding (en gros, "inclusion de police", enfin, vous voyez...) et consiste à créer un fichier contenant certains caractères d'une police donnée, à mettre ce fichier sur son site et à utiliser ce fichier pour afficher du texte dans cette police.

Comme d'habitude, on trouve deux standards : les !!embed!!ded OpenType (fichiers .eot) fonctionnant sous Internet Explorer, et les TrueDoc (fichiers .pfr, pour "Portable Font Resource") destinés aux utilisateurs de Netscape, Mozilla, etc. Mais on est habitués, non ?

Chacun des deux formats permet de ne convertir qu'une partie des caractères disponibles dans une police, de façon à alléger la fichier résultant. Mais on peut évidemment convertir entièrement la police, afin de pouvoir afficher du texte de manière dynamique. (et ça c'est cool !)

Et qu'est ce qu'on gagne ?

1. Il n'est plus nécessaire de créer nos vingt titres de sections au format GIF ou JPEG pour être sûr que les visiteurs les verront bien dans cette jolie police que vous avez mis tant de temps à créer (ou pour laquelle vous avez dépensé tant d'argent). Le temps de chargement de vos pages s'en trouve considérablement réduit puisqu'au lieu de charger plusieurs images, seule la police est chargée.(16ko) Et comme elle est mise en cache, vous pouvez l'utiliser dans toutes vos pages !
2. Les deux formats vous assurent que les polices ne pourront pas être réutilisées par d'autres personnes. En effet, chaque fichier .eot ou .pfr contient une liste des adresses ayant le droit d'utiliser la police. Ces adresses sont à spécifier lors de la création du fichier.

Comment ça marche ?

Il faut tout d'abord fabriquer le fichier .eot qui contiendra tous les caractères utiles (éventuellement tous ceux de la police). Microsoft, sûrement par pur altruisme ! et certainement pas pour une question de part de marché..., propose gratuitement WEFT (pour "Web !!embed!!ding Fonts Tool"), qui permet de fabriquer un fichier .eot à partir de n'importe quelle police installée sur votre machine. Enfin, je dis "n'importe quelle police" mais je m'emporte un peu... Il faut que l'opération soit autorisée, ce qui n'est pas toujours le cas. Rassurez-vous, pour chaque police trouvée, WEFT vous signale si c'est une police standard (inutile de l'inclure) ou si elle est interdite à toute inclusion.

Une fois ce fichier créé, il suffit d'ajouter un code comme celui qui suit dans les pages où vous souhaitez inclure votre police (ou bien dans votre feuille de style) :

BODY {
background: #FFFFFF;
font-family: VotrePolice et les autres;
font-style: normal;
font-weight: normal;
src: !url(!http://Votre_site/Votre_rep/Police.eot);
}