Polices d'écriture entre navigateurs différents

Programmation
#1

Bonjour.

Je développe un site (non hébergé pour le moment), et j’ai des problèmes quand au polices d’écriture.

J’ai stipulé dans mon fichier CSS les fontes suivantes :

Sous Iceweasel, je dispose d’Helvetica, la police que je préfère. Sous Chrome cependant, celle-ci ne semble pas être disponible. Sauf qu’au lieu de prendre la police Trebuchet, il me prend Arial ! Trébuchet est pourtant présent. Pour preuve, si je le mets en tête de liste, mon site est bel et bien affiché avec cette police sous Chrome.

Alors de deux choses l’une :

  • Soit Chrome prend une police par défaut lorsqu’il n’a pas la première police du font-family.
  • Ou alors il y a une confusion entre Helvetica qui est reconnu par Chrome mais affiché comme un Arial.

Je sais qu’il est illusoire de vouloir à tout prix les même rendus entre navigateurs, mais là ça me choque. Si au passage vous connaissez des polices des types mentionnés (Helvetica, Trebuchet MS), je prends aussi.

Merci pour votre attention.

#2

Pour déterminer les règles appliquées par un navigateur, détermine d’abord 3 polices dont tu es sûr qu’il sait les afficher. Par exemple essayes successivement :

[code]font-family: connaitpas;

font-family: Gentium;

font-family: connaitpas;

font-family: FreeMono;

font-family: connaitpas;

font-family: OpenSymbol;[/code]

Si tu constates que ça change à chaque fois, tu es sûr que les trois polices Gentium, FreeMono, et OpenSymbol sont disponibles.

Maintenant tu fais tes tests :

font-family: Gentium, FreeMono, OpenSymbol; font-family: Gen777tium, FreeMono, OpenSymbol; font-family: Gen777tium, Fre777eMono, OpenSymbol; font-family: Gen777tium, Fre777eMono, Ope777nSymbol; font-family: Gen777tium, FreeMono, Ope777nSymbol;

Et tu regardes si le comportement du navigateur est normal.

Fais ces tests dans une nouvelle page web vierge, avec juste une ligne de texte. C’est pour être sûr que ce n’est pas une partie de ton site qui provoque la faute.

Sinon au niveau des outils de débuggage, tu peux essayer Firebug (extension de firefox). Ca te permet de connaître précisément quelles règles css (externes, globales, et locales) s’appliquent pour chaque élément d’une page web.

#3

[quote=“Cver1”]Bonjour.

Je développe un site (non hébergé pour le moment), et j’ai des problèmes quand au polices d’écriture.

J’ai stipulé dans mon fichier CSS les fontes suivantes :

Sous Iceweasel, je dispose d’Helvetica, la police que je préfère. Sous Chrome cependant, celle-ci ne semble pas être disponible. Sauf qu’au lieu de prendre la police Trebuchet, il me prend Arial ! Trébuchet est pourtant présent. Pour preuve, si je le mets en tête de liste, mon site est bel et bien affiché avec cette police sous Chrome.

Alors de deux choses l’une :

  • Soit Chrome prend une police par défaut lorsqu’il n’a pas la première police du font-family.
  • Ou alors il y a une confusion entre Helvetica qui est reconnu par Chrome mais affiché comme un Arial.

Je sais qu’il est illusoire de vouloir à tout prix les même rendus entre navigateurs, mais là ça me choque. Si au passage vous connaissez des polices des types mentionnés (Helvetica, Trebuchet MS), je prends aussi.

Merci pour votre attention.[/quote]

Tu es sûr qu’il est présent sous la même forme : “Trebuchet MS” ?

#4

@Branch :

J’ai fait tous ces tests avec un nouveau fichier. Tout fonctionne parfaitement autant sous Iceweasel que sous Chrome. Les 3 polices sont reconnu et les règles d’application sont les même dans ces différentes tests.

@Ricardo :

Oui cela fonctionne parfaitement avec ces deux navigateurs chez moi et sous cette forme (avec et sans guillemets).

Edit : Je viens de me rendre compte que Helvetica (la police que je cherche à faire tourner sous Chrome) fonctionne dans ce nouveau fichier sous les deux navigateurs. Je poursuis mes investigations…

Edit2 : Je me sens un peu bête… :mrgreen: Je pense que les deux polices fonctionnent correctement sous les deux navigateurs. En analysant chaque lettre, on remarque qu’elles ont les mêmes caractéristiques. Néanmoins leur espacement et leur épaisseur diffèrent, donnant un rendu assez différent en somme.

#5

Une capture sera plus parlante.

img844.imageshack.us/img844/7426 … vetica.jpg

Du coup je pense qu’il n’y a pas de solution à mon problème si ce n’est à changer de police… Peut on définir une police pour un navigateur et une autre pour un autre navigateur ?

#6

Hum … à mon avis tu vas énormément compliquer la gestion de ton site site tu t’amuses à faire ce genre de choses.

Si tu veux tout de même faire ça, tu peux essayer de te mettre au PHP. Avec ça tu peux obtenir des informations sur le navigateur, et faire des modifications sur la page avant de l’envoyer. Sinon tu peux aussi utiliser Javascript pour sélectionner la feuille de style que tu veux utiliser en fonction du navigateur, mais il est possible de désactiver Javascript dans les préférences du navigateur …

Clairement, le CSS est prévu pour être le même pour tous les navigateurs (enfin tous les navigateurs de même type, après on peut faire des feuilles spéciales pour les imprimantes, les navigateurs oraux …). Si tu veux un comportement différent, c’est que le CSS n’est pas adapté à ce que tu veux faire (tu voudrais plus avoir une mise en forme controlée au millimètre).

Essaye de regarder le site d’un graphiste professionnel pour voir qu’est-ce qu’il utilise pour avoir un beau rendu quelque soit le navigateur.

EDIT : dans la brouillon de la spécification CSS 3, il y a une construction particulière qui permet de charger toi même la police que tu veux. Mais ce n’est pas une spécification officielle du W3C, elle peut être modifiée par la suite. Et je ne sais pas si les navigateurs l’implémentent. D’autres explications ici : covertprestige.info/css/font-face/

EDIT2 : Tiens j’ai tapé “graphiste professionnel” dans un moteur de recherche, et je suis tombé sur ce site : atoopix.com/ . Le gars à utilisé du Flash (je crois) pour que ça soit super joli et paramétré au millimètre. Mais regarde un peu le résultat final sous Debian. Catastrophique. Et en plus ça bouffe tout mon CPU.

#7

Oui je pense que je vais laisser tomber ça. Je ne sais pas ce que donnera le CSS3 mais je me disais en voyant des propriétés (non encore officielles et c’est sûrement pour ça) telles que :

-moz-border-radius: 15px; -webkit-border-radius: 15px;

on pouvait espérer (au moins un jour) faire une sélection par type de navigateur via le CSS avec ces “préfixes”.

Il est dommage que les apparences soient aussi différentes pour cette police. Je vais me chercher une police alternative qui restera proche dans chacun des deux navigateurs. Je sais que je suis un doux rêveur à vouloir les harmoniser mais dans mon cas précis ça me choque.

Merci pour tes réponses. :006