Font-weight est toujours cassé pour l’ensemble des navigateurs sauf un

Par Richard Rutter

La propriété CSS 1 font-weight permet de spécifier si un texte doit être en gras ou non. Cela est rendu possible par l'usage de font-weight:bold et font-weight:normal. Rien que du CSS de base jusqu'ici. Mais de nombreuses fontes sont bien plus riches de nuances ; elles peuvent proposer Ultralight, Extralight, Light, Thin, Medium, Book, Semibold, Demibold, Extra-bold, Heavy, Black, Extra-black, Ultra-Black et bien plus encore.

Depuis sa création en 1996, CSS a permis d'afficher ces autres graisses par le biais d'une échelle numérique associée à la propriété font-weight. Ce mécanisme est quasi-inexistant dans tous les navigateurs actuels mis à part Firefox 3 pour Mac.

Comment cela devrait fonctionner

Comme les mots-clé normal et bold, font-weight prend aussi en compte neuf valeurs numériques : 100, 200, jusqu'à 900. Ces nombres représentent un panel qui s'étend de Ultra-light à Ultra-Dark, avec normal à 400 et bold à 700. Pour spécifier une graisse faible vous écririez donc font-weight:200. Voici un guide sommaire mettant en regard l'échelle numérique et les termes couramment utilisés :

100Ultra-light, Extra-light
200Light, Thin
300Book
400Regular, Normal
500Medium
600Semibold, Demibold
700Bold
800Heavy, Black, Extra-bold
900Ultra-black, Extra-black, Fat, Poster

L'échelle numérique n'a qu'une correspondance approximative avec les noms de graisse puisqu'il n'existe aucune définition officielle de ces termes – C'est à l'éditeur de la fonte de choisir si la fonte se nomme Heavy ou Black, ou si elle devrait être Extra-light au lieu de Ultra-light, donc vous risquez de devoir tâtonner un peu.

Ce qu'il en est exactement

J'ai créé une suite de tests en utilisant Myriad Pro, puisqu'elle permet de jouer avec de nombreuses graisses ; dans mon cas Light, Regular, Semibold, Bold et Black sont installées. Si Myriad Pro n'est pas installée chez vous, vous ne verrez qu'une fonte à chasse fixe, mais prenez la liberté de télécharger et d'éditer le fichier de tests, et jouer avec en utilisant une autre fonte. Incidemment, j'ai utilisé des fichiers OpenType à la sauce PostScript strictement identiques pour les tests sous Mac et Windows. Le balisage que j'ai utilisé pour cette suite de tests est à peu près comme suit :

p { font-family:"Myriad Pro" }
#one { font-weight:100 }
#two { font-weight:200 } ...
#nine {font-weight:900 }

<p id="one">100 why pangolins dream of quiche</p>
<p id="two">200 why pangolins dream of quiche</p> ...
<p id="nine">900 why pangolins dream of quiche</p>

Firefox 3 pour Mac affiche la suite de tests comme suit :

Capture d'écran pour Firefox 3/Mac
Firefox 3/Mac: affichage correct

Comme vous pouvez le voir, 100, 200 & 300 sont affichés en utilisant la graisse Light, 400 & 500 utilisent Regular, 600 est affiché en Semibold, 700 en Bold, et 800 & 900 sont affichés en utilisant Black. Il s'agit du comportement correct.

Par contre, Safari 3.2, Opera 10.00 Alpha, Firefox 3.0 sur Windows et Internet Explorer 8 Beta 2 se trompent tous de façons similaires avec cependant quelques subtilités.

Capture d'écran pour Safari
Safari 3.2: 100–500 affichés en Regular, 600–900 en Semibold

Capture d'écran pour Opera 10 alpha
Opera 10 Alpha: 100–500 affichés en Regular, 600–900 en Bold

Capture d'écran pour Firefox 3/Win
Firefox 3/Win: 100–500 affichés en Regular, 600–900 en Semibold

Capture d'écran pour IE8
IE8 Beta 2 : 100–500 affichés en Regular, 600 en Bold, 700–900 en Semibold

Pour la plupart, ces navigateurs supportent partiellement l'échelle numérique, mais uniquement pour deux de ses valeurs ; Regular et Bold ou Semibold.

Une solution

Il existe une solution de contournement. En s'appuyant sur le travail de Guillermo Esteves, elle implique l'ajout pertinent de quelques font-families. Tout comme le nom de la fonte – Myriad Pro dans notre suite de tests – chaque graisse a deux autres noms : le nom pour écran, eg. Myriad Pro Light et le nom PostScript, eg. MyriadPro-Light (pour trouver ces noms, utilisez un outils de gestion de fontes comme FontExplorer X et cliquez info pour la fonte) . Pour obtenir d'Opera, IE8, Firefox 2 et Firefox 3/Win qu'ils affichent une graisse alternative, vous devez spécifier le nom pour écran, de telle sorte que la suite de tests serait modifiée comme suit :

#one {
  font-weight:100;
  font-family:"Myriad Pro Light", "Myriad Pro"; }

Cependant, cela ne fonctionne pas dans Safari qui a besoin du nom PostCript. Vos styles ont donc besoin d'être modifiés de nouveau, comme le montre la suite de tests modifiée :

#one {
  font-weight:100;
  font-family:"MyriadPro-Light", "Myriad Pro Light",
    "Myriad Pro"; }

Il y a plusieurs inconvénients à cette solution de contournement. Le premier est évidemment que vous devez spécifier au moins trois familles de fonte pour ne changer que la graisse. Mais le problème principal est que font-weight ne fonctionnera plus (mis à part sur Firefox 3/Mac) puisque la famille de fonte que vous spécifiez ne contient qu'une seule graisse. Si vous avez besoin d'un mot en gras dans un paragraphe à graisse légère, vous aurez à spécifier le font-family ainsi que le font-weight. Pas très pratique.

Franchement, c'est vraiment déprimant que ce bug soit toujours présent après 12 ans, et malgré leur succès relatif pour les Acid tests, ces navigateurs ne peuvent même pas prétendre supporter CSS 1 complètement ou correctement. J'espère que nous verrons des corrections sous peu (visiblement déjà implémentées dans WebKit). Je sais que les fontes sont un sujet délicat en ce qui concerne les systèmes d'exploitations, mais si cela peut être fait dans Firefox 3/Mac, il n’y a pas de raison pour que les autres navigateurs n’en fassent pas de même.


http://www.clagnut.com/blog/2228/

Fiche technique

À propos de l'auteur

Richard Rutter vit à Brighton (Royaume-Uni) et se définit en tant que producteur web : comme le producteur de cinéma, il a un oeil sur le budget, une main sur les équipes de production, et des velléités de direction artistique. Il s’exprime sur le web et ses techniques depuis son blog, clagnut.

Articles similaires

Voici la liste des dix articles les plus récents en rapport avec cet article :

Débutant

CSS

© 2001-2024 Pompage Magazine et les auteurs originaux - Hébergé chez Nursit.com ! - RSS / ATOM - About this site