Loin de maitriser tous les subtilités de la gestion de la typographie en CSS, j’ai néanmoins découvert l’intérêt de la balise « Font-Face ». Cette dernière permet d’utiliser n’importe quelle fonte ( ou presque… ) sur un site internet. Fini donc, « l’arial », la « verdana » et autres « helvetica » !
Étrangement cette balise (css2) existe depuis Internet Explorer 4 ( 1998 ), mais n’acceptait que le format eot ( Embedded OpenType : un format propriétaire relativement limité et contraignant). Depuis, Safari 3, Firefox 3.5 et Opera 10 ont intégré cette balise ( css3 ), et il est donc possible d’utiliser une police TrueType (ttf) ou OpenType (otf).
Ainsi, on accède à la liberté avec un petit bout de code du genre :
@font-face{
font-family:'maFont';
src: url('maFont.eot');
}
@font-face{
font-family:'maFont';
src: url('maFont.otf');
}
Reste quelques soucis d’affichage suivant le navigateur ou le système de l’internaute. Ainsi sous Mac les typo vont être lissés ( anti-alising), alors que sous PC, il n’y aura pas anti-alising.
En lisant notre Blog, vous constaterez donc que les titres des articles sont maintenant composés en typo « Grapheine » !
Petit extrait de notre typo, à travers ce fameux pangramme hétéro-consonnantique (Phrase comprenant toutes les lettres de l’alphabet et où chaque consonne n’est utilisée qu’une seule fois ). Généralement attribué à Gerorges Perec, il semblerait que ce pangramme soit apparu la première fois dans le journal de Mickey en 1957
:
“Portez ce
vieux whisky
au juge blond
qui fume”
Voici l’équivalent de ce que vous devriez voir s’afficher en typo sur Mac :

Voici l’équivalent de ce que vous devriez voir s’afficher en typo sur PC, c’est moins glorieux, car le lissage des police n’est pas activé de base ( Beurk les PC… )





















Je suis tellement habituée à l’anti-aliaaaaasing sur mon PC que je ne sais même plus si j’ai activé moi-même le lissage ou s’il y était de base.
Sur XP, sûr, c’est moche de base. Vista et Seven, me souviens pu.
Étonnant que sur la plupart des sites que je consulte pour du CSS, aucun ne parle de cette propriété pourtant très utile.
*fouille*
… Ouais, vraiment aucun.