CSS : Une police embarquée

Vous avez avez réalisé en local un superbe site en particulier par l'emploi d'une police exotique. Mais au moment de penser à l'hébergement du site (afin que le public y ait accès) vous vous dites :'c'est idiot ! la police que j'ai employée ne sera probablement pas installée sur le PC du visiteur donc je me suis fatigué pour rien ... '
Rassurez vous. Vous pouvez désormais grâce au CSS3 mettre une police à disposition du 'client' le temps de sa visite.

Le titre et le texte ci-dessous apparaissent avec une police téléchargée grâce à la feuille de style

Les instituteurs : les 'hussards' de la République

La troisième République veut que l'école élémentaire dispense non seulement l'instruction de base mais aussi fasse des petits français des patriotes prêts à se battre pour leur pays ; et à venger l'affront de mil huit cent soixante dix ; à reprendre l'Alsace et la Lorraine aux "boches".

Le code de la page (extrait)

... <style> @font-face{font-family : scolaire; src:url(../polices/ecole.ttf) ;} .special {font-family : scolaire ; font-size : 16px ; } </style> ... <body> ... <p class ='special'>La troisième République veut que l'école élémentaire dispense non seulement l'instruction de base mais aussi fasse des petits français des patriotes prêts à se battre pour leur pays ; à venger l'affront de mil huit cent soixante dix ; à reprendre l'Alsace et la Lorraine aux "boches". </p> ...

Commentaire du code

Le texte affecté de la classe special est mis en forme avec une police qui n'est pas installée sur votre PC ...
Il est en effet possible avec CSS3 d'embarquer une police !
Regarder attentivement la feuille de style !
La première règle de style (sélecteur @font-face) permet au client d'embarquer un fichier de police sous le nom scolaire.
Il suffit ensuite de préciser que tout texte affecté de la classe générique special sera mis en forme avec la police dénommée scolaire.

Remarque

Internet Explorer ne reconnaissait pas le format ttf mais ce n'est pas le cas de Edge. Donc cette page fonctionne correctement avec tous les navigateurs modernes.


Retour menu