Rendu du texte (chrome/firefox)

Bonsoir

Est-il impossible d'avoir exactement le même rendu de police d'un navigateur à l'autre ?

J'ai parcouru le web à la recherche de réponses pour avoir exactement le même rendu de typo entre chrome et firefox et j'ai l'impression d'une impasse à ce niveau. Même le site Alsacreations pourtant à la pointe en matière de CSS ne s'affiche pas de la même manière au niveau typo, l'espace entre les mots, le moteur de rendu n'affiche définitivement pas la police de manière identique d'un navigateur à l'autre.

Ça me déprime, j'attache une importance à ce genre de détail surtout que ça se répercute sur l'ensemble d'un design comme le montre l'augmentation de la taille du conteneur qui va pousser en cascade le reste du design. .

Ici : sous firefox

Ici : sous chrome


Le problème semble se résoudre quand j'augmente la taille de la police. Quand elle est à 11px, elle s'affiche de manière "identique" sur chrome et firefox....

Merci de votre attention.

PS :

 body {
font-family:verdana;
font-size:9px;
 }
  
#conteneur  {
width:300px;
background:#fdefd5;
}

p{
text-align: justify;
text-justify: inter-word;
color:#666;
}
p.box {
  float:right;
  width:150px;
  padding:20px;
  margin:0px 0px 20px 20px;
  background-color:#c0c0c0;
  border:1px solid gray;
}

Modifié par luxylux (06 Nov 2014 - 18:22)

Bonjour et bienvenue sur le forum, luxylux

Pour répondre simplement et rapidement à ta question : chaque navigateur a son propre moteur de rendu et les contextes de navigation sur internet sont innombrables : le nombre de configurations – OS / navigateur appareil / taille d'écran / résolution / vitesse de connexion / réglage du navigateur et de l'ensemble du système – différentes doit atteindre les milliers et même certainement bien plus.

Bref, le pixel perfect a fait long feu. Donc, oui, c'est normal d'avoir des différences entre les navigateurs. On peut certes les minimiser mais une fois arrivés à un bon degré de compatibilité, on arrive vite au règne du "lâcher-prise".

Dans ton exemple, il y a des détails bien plus choquants :
– une taille de police à 9px . On considère comme étant une mauvaise pratique d'avoir une taille typo inférieure ou égale à 11px, docn autant dire que tu est hors des clous
– de la justification de texte sur une colonne de moins de 30 caractères Déjà que la justification de texte pose de toute façon problème sur le web, sur une colonne aussi fine, tu t'expose à énormément de problèmes de lisibilité.

Voilà voilà, en espérant t'être utile

Merci pour ton message de bienvenue

Quote "– une taille de police à 9px Smiley eek . On considère comme étant une mauvaise pratique d'avoir une taille typo inférieure ou égale à 11px, docn autant dire que tu est hors des clous Smiley cligne "

Ce sont mes conditions générales, je tente de donner la flemme à qui va les lire

Plus sérieusement, j'ai voulu voir comment réagissent les navigateurs avec les polices en partant de très petit, et là j'ai paniqué car je pensais que les choses avaient changé, depuis IE6/IE7 et tous les hacks qu'il fallait mettre dans le code des différents fichier css..

La justification du texte était faite dans un conteneur de 800 px que j'ai réduit pour mes tests.


Voir qu'en 2014 les navigateurs soient encore pas fixés sur le moteur de rendu c'est un peu frustrant,... Chrome à un aspect baveux dans sa police, safari aussi, alors que firefox non. Sans compter que ce changement d'aspect consomme du pixel et donc bouge les éléments en cascade.


Quote "Voilà voilà, en espérant t'être utile Smiley smile "

Oui, très Je vais tenter d'avoir une compatibilité proche et lâcher prise pour ce que je peux rien faire.
Modifié par luxylux (06 Nov 2014 - 20:19)

En attendant, quelle(s) police(s) utilise-tu ? Du websafe ? Autre ? Intégrées comment ?
Il y a –peut-être– des choses à voir de ce côté-là également.

luxylux a écrit :
Plus sérieusement, j'ai voulu voir comment réagissent les navigateurs avec les polices en partant de très petit […]
Chrome à un aspect baveux dans sa police, safari aussi, alors que firefox non

Alors par contre cette question-là tient quand même certainement aussi beaucoup au fait que tu est parti de toutes petites tailles de textes… essaye de comparer avec des tailles plus courantes (14 à 16px pour du texte de labeur, 18 à 24px pour de la titraille, par exemple). Tu verras que les différences vont possiblement s'estomper.

Et encore, vu tes navigateurs, je suppose que tu est sur Mac. Tu vas voir quand tu testera tout cela sur diverses machines Windows… notamment au niveau du lissage des polices

bonjour,
Le rendu des fontface sont des soucis courant pour nous intégrateur.
Mais comment expliquer les différences de rendu, parfois considérables, d’un navigateur et d’un OS à l’autre ?
Dans mon cas j'utilise essentiellement google font sur mes pages web.
En utilisant directement sur un site une typo fournie par Google Webfonts au moyen du petit code JavaScript fourni, on constate des problèmes d’affichage sous Internet Explorer en général, et sous Chrome en particulier.
Pas de panique, voici une méthode qui devrait largement améliorer le rendu d’une police récupérée sur Google Webfonts dans Chrome pour Windows :
Au lieu d’appeler directement le code CSS ou JavaScript fourni par Google Webfonts sur votre site, récupérez le fichier TTF de la police :
Utilisez le @font-face generator de FontSquirrel pour générer un kit @font-face avec votre fichier TTF.
Récupérez votre kit @font-face et voilà le rendu de la fonte s’est considérablement amélioré.