CSS3 pour la mise en forme
L'écriture des spécifications CSS progresse à grands pas, et la version 3 comporte déjà de nombreux modules implémentés dans les navigateurs récents. L'année 2012 verra certainement nos habitudes changées par les nouvelles possibilités offertes.
Vous pourrez constater l'état d'avancement des différents modules CSS sur la page récapitulative Cascading Style Sheets : Current Work. ou sur l'excellent site When Can I Use.
Polices "exotiques"
Abandonnée en CSS2.1, la propriété @font-face réintégrée à CSS3 permet d'afficher une police exotique embarquée sur le serveur.
Avant toute utilisation de police non standard sur votre site web, prenez garde à deux points essentiels :
- Comme toute œuvre artistique, une fonte est soumise à des droits d'auteurs. Peu sont libres de droits;
- L'ensemble du fichier est téléchargé même si vous n'utilisez que quelques caractères. Certaines fontes pèsent plus de 1Mo et vont considérablement ralentir l'affichage de votre document.
Les navigateurs modernes tels qu'Opera 10+, Firefox 3.5+, Safari 3+ et Chrome 4+ reconnaissent cette propriété CSS3, mais là encore Internet Explorer ne facilite pas les choses en ne reconnaissant qu'un seul format de fichier de fonte (.eot), incompatible avec les autres ! Il est donc nécessaire de systématiquement proposer une double version des polices à télécharger : .woff (ou .ttf) pour le commun des mortels, et une version .eot pour IE.
Outils automatiques
Fort heureusement, de plus en plus d'outils proposent de vous prémâcher le travail. C'est le cas de Font-Face Generator de Font Squirrel qui vous convertit votre fonte en plusieurs format et vous génère le code CSS multi-navigateurs, mais également due la galerie Google Webfont, qui répertorie près de 400 polices différentes et directement exploitables (Google héberge la fonte libre et fourni le code @font-face pré-mâché) : il suffit de placer un lien au sein de votre document, par exemple :
<link href='http://fonts.googleapis.com/css?family=Amaranth' rel='stylesheet' type='text/css'>
Dans le cas de Goetter.fr, la fonte utilisée est "Amaranth", une police légère et libre de droit, disponible sur Google Webfont, mais pour l'exercice, nous allons l'intégrer à l'aide de la fonction @font-face.
Commencez par convertir vos fichier en plusieurs formats à l'aide de Font-Face generator, puis il vous suffit de les appeler dans vos feuilles de styles.
Rappelez-vous qu'Internet Explorer (IE6-IE8) ne reconnaît que le format propriétaire .eot, et pire : il télécharge tous les fichiers de police proposées et non pas seulement celui qui le concerne ! Soyez donc doublement vigilants quant au poids de vos fontes.
Une des solutions pour éviter ce problème est d'employer une astuce basée sur une syntaxe d'URL composée d'un mot-clé débutant par un caractère dièse # (voir ci-dessous).
1- Version simple et standard, incluant uniquement les formats de police .woff et .ttf (ne fonctionne pas sur IE6-IE8) :
@font-face {
font-family: 'Amaranth';
src: url('fonts/amaranth.woff') format('woff'), url('fonts/amaranth.ttf') format('truetype');
}
2- Version modifiée incluant le format .eot ainsi qu'une bidouille pour Internet Explorer :
@font-face {
font-family: 'Amaranth';
src: url('fonts/amaranth.eot?#iefix') format('embedded-opentype'),
url('fonts/amaranth.woff') format('woff'), url('fonts/amaranth.ttf') format('truetype');
}
Concrètement, il suffit ensuite de déclarer le nom de cette police dans la liste des valeurs de la propriété font-family, par exemple :
h1 {
font-family: "Amaranth", "Lucida Grande", Tahoma, Arial, sans-serif;
}