web-dev-qa-db-fra.com

Même police sauf que son poids semble différent sur différents navigateurs

Le texte est correctement affiché dans Chrome. Je veux qu'il s'affiche de cette façon dans tous les navigateurs. Comment puis-je faire ceci?

J'ai pu résoudre ce problème dans Safari avec -webkit-font-smoothing: antialiased;

Chrome:
Chrome

Firefox:
Firefox

h1 {
    font-family: Georgia;
    font-weight: normal;
    font-size: 16pt;
    color: #444444;
    -webkit-font-smoothing: antialiased;
}
<h1>Hi, my name</h1>

Et un JSFiddle: http://jsfiddle.net/jnxQ8/1/

cssfontscross-browser
56
Stijn Martens

Assurez-vous que la police est la même pour tous les navigateurs. S'il s'agit de la même police, le problème n'a aucune solution à l'aide de CSS entre navigateurs .

Parce que chaque navigateur a son propre moteur de rendu des polices, ils sont tous différents. Ils peuvent également différer dans les versions ultérieures ou entre différents systèmes d'exploitation.

[~ # ~] mise à jour [~ # ~] : pour ceux qui ne comprennent pas les différences de rendu des polices du navigateur et du système d'exploitation, lisez ceci et this .

Cependant, la plupart des gens ne remarquent même pas la différence, et les utilisateurs l'acceptent. Oubliez la conception multi-navigateur pixel parfaite, sauf si vous êtes:

  1. Essayer de désactiver le rendu des sous-pixels par CSS (tous les navigateurs ne le permettent pas et le texte peut être laid ...)
  2. Utilisation d'images (les ressources sont exigeantes et difficiles à maintenir)
  3. Remplacement de Flash (nécessite de la programmation et ne fonctionne pas sur iOS)

[~ # ~] update [~ # ~] : J'ai vérifié la page d'exemple. Ajuster le crénage par rendu de texte devrait aider:

text-rendering: optimizeLegibility;

Plus de références ici:

  1. Une partie du rendu des polices est contrôlée par font-smoothing (comme mentionné) et une autre partie est text-rendering . Le réglage de ces propriétés peut aider car leurs valeurs par défaut ne sont pas les mêmes d’un navigateur à l’autre.
  2. Pour Chrome, si cela ne s'affiche toujours pas, essayez ceci hack texte-ombre . Cela devrait améliorer votre rendu de la police Chrome, en particulier sous Windows. Cependant, l’ombre au texte deviendra folle sous Windows XP. Faites attention.
46
vincicat

Afin de standardiser au mieux vos polices incorporées @ font-face sur tous les navigateurs, essayez d'inclure ce qui suit dans votre déclaration @ font-face ou sur votre style de police de corps:

speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;

À l'heure actuelle, il ne semble pas exister de solution universelle pour toutes les plateformes et toutes les versions de navigateur. Comme indiqué fréquemment, tous les navigateurs/systèmes d'exploitation ont des moteurs de rendu de texte différents.

17
oneiota

Il y a quelques bonnes informations à ce sujet ici: https://bugzilla.mozilla.org/show_bug.cgi?id=857142

Expérimente toujours, mais à ce jour, une solution peu invasive, visant uniquement la FF, est:

body {
-moz-osx-font-smoothing: grayscale;
}
11
bobzIlla

Essayez -webkit-font-smoothing: subpixel-antialiased;

7
Anne-Pieter Strikwerda

J'ai collecté et testé des solutions discutées:

Windows10 Prof x64:

* FireFox v.56.0 x32 
* Opera v.49.0
* Google Chrome v.61.0.3163.100 x64-bit

macOs X Serra v.10.12.6 Mac mini (mi-2010):

* Safari v.10.1.2(12603.3.8)
* FireFox v.57.0 Quantum
* Opera v49.0

Les polices grasses résolues semi (toujours au niveau micro dans Safari):

text-transform: none; // mac ff fix
-webkit-font-smoothing: antialiased; // safari mac nicer
-moz-osx-font-smoothing: grayscale; // fix fatty ff on mac

Ne pas avoir d'effet visuel

line-height: 1;
text-rendering: optimizeLegibility; 
speak: none;
font-style: normal;
font-variant: normal;

Mauvais effet visuel:

-webkit-font-smoothing: subpixel-antialiased !important; //more fatty in safari
text-rendering: geometricPrecision !important; //more fatty in safari

n'oubliez pas de définir! important lors des tests ou veillez à ce que votre style ne soit pas modifié

5
KEMBL

J'ai de nombreux sites avec ce problème & enfin trouvé un correctif pour que les polices firefox soient plus épaisses que chrome.

Vous avez besoin de cette ligne à côté de votre correctif -webkit -moz-osx-font-smoothing: grayscale;

body{
    text-rendering: optimizeLegibility;
   -webkit-font-smoothing: subpixel-antialiased;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}
2
mateostabio

Je ne pense pas que l'utilisation de "points" pour la taille de police sur un écran soit une bonne idée. Essayez d'utiliser px ou em sur font-size.

Depuis W3C :

Ne spécifiez pas la taille de la police en pt ou dans d'autres unités de longueur absolue. Ils sont rendus de manière incohérente sur toutes les plates-formes et ne peuvent pas être redimensionnés par l'agent utilisateur (navigateur, par exemple).

0
Trevor