web-dev-qa-db-fra.com

Les polices ont une apparence différente dans Firefox et Chrome

J'utilise les polices Web de Google PT-sans

font-family: 'PT Sans',Arial,serif;

mais il semble différent dans Chrome et Firefox 

Dois-je ajouter quelque chose pour que le résultat soit identique dans tous les navigateurs?

cssfirefoxgoogle-chromefonts
36
Tushar Ahirrao

css reset peut résoudre le problème, je ne suis pas sûr.

http://developer.yahoo.com/yui/reset/

4
Vamsi Krishna B

Pour la police ChunkFive de FontSquirrel, spécifiez "font-weight: normal;" empêchait le rendu de Firefox de ressembler à un âne lorsqu'il était utilisé dans un en-tête. On dirait que Firefox essayait d'appliquer un faux gras à une police qui n'a qu'un poids, alors que Chrome ne l'était pas.

22
Sergiy

Pour moi, les polices Web Chrome ont l'air minable jusqu'à ce que je mette la police SVG devant WOFF et TrueType. Par exemple:

@font-face {
    font-family: 'source_sans_proregular';
    src: url('sourcesanspro-regular-webfont.eot');
    src: url('sourcesanspro-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('sourcesanspro-regular-webfont.svg#source_sans_proregular') format('svg'),
         url('sourcesanspro-regular-webfont.woff') format('woff'),
         url('sourcesanspro-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

Même dans ce cas, les polices de Chrome semblent plus minces que dans Firefox ou IE. Chrome a l'air bien à ce stade, mais je souhaite généralement définir des polices différentes dans IE et Firefox. J'utilise une combinaison de commentaires conditionnels IE et de jQuery pour définir différentes polices en fonction du navigateur. Pour Firefox, la fonction suivante est exécutée lors du chargement de la page:

function setBrowserClasses() {
    if (true == $.browser.mozilla) {
        $('body').addClass('firefox');
    }
}

Ensuite, dans mon CSS, je peux dire

body { font-family: "source_sans_proregular", Helvetica, sans-serif; }
body.firefox { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }

De même, dans une feuille de style exclusivement pour IE incluse dans des commentaires conditionnels IE, je peux dire:

body { font-family: "source_sans_pro_lightregular", Helvetica, sans-serif; }
11
Sarah Vessels

Il y a quelques corrections. Mais généralement cela peut être corrigé avec:

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

Parfois, cela peut être dû à font-weight. Si vous utilisez une police personnalisée avec @font-face, assurez-vous que votre syntaxe font-weight est correcte. Dans @font-face, l’idée des propriétés font-weight/font-style est de conserver votre nom font-family dans différentes déclarations @font-face tout en utilisant différents font-weight ou font-style pour que ces valeurs fonctionnent correctement dans CSS (et chargez votre police personnalisée et non "fake bold").

J'ai vu -webkit-text-stroke: 0.2px; mentionné pour épaissir les polices webkit, mais je pense que vous n'en aurez probablement pas besoin si vous utilisez le premier morceau de code que j'ai donné.

6
Ryan Taylor

Pour éviter les différences de police entre les navigateurs, évitez d’utiliser des styles CSS pour modifier l’aspect de la police. L'utilisation de la propriété font-size est généralement sûre, mais vous pouvez éviter de faire des choses comme font-weight: bold; au lieu de cela, vous devez télécharger la version en gras de la police et lui attribuer un autre nom de famille.

5
Dave

J'ai remarqué que Chrome a tendance à rendre les polices un peu plus nettes et Firefox un peu plus fluide . Vous ne pouvez rien y faire. bonne chance

4
andrewk

Depuis 2014, Chrome a toujours un bogue connu dans lequel, si une copie locale est installée sur le web font, il choisit d'utiliser la version locale, ce qui entraîne des problèmes de rendu de l'OP. 

Pour résoudre ce problème, vous pouvez procéder comme suit:

D'abord, ciblez le navigateur Chrome ou OSX (pour moi, le problème ne concernait que Chrome OSX). J'ai utilisé ce simple JS pour obtenir une détection rapide du navigateur/du système d'exploitation. Vous pouvez choisir de le faire de toute autre manière à laquelle vous êtes habitué:

https://raw.github.com/rafaelp/css_browser_selector/master/css_browser_selector.js

Maintenant que vous pouvez cibler un navigateur/système d'exploitation, créez la "nouvelle" police suivante:

@font-face {
    font-family: 'Custom PT Sans';    
    src: url(http://themes.googleusercontent.com/static/fonts/ptsans/v6/jKK4-V0JufJQJHow6k6stALUuEpTyoUstqEm5AMlJo4.woff) format('woff');
    font-weight: normal;
    font-style: normal;
}

L’URL de police est identique à celle utilisée par votre navigateur lors de l’incorporation de la police Web de Google. Si vous utilisez une autre police, copiez et modifiez l'URL en conséquence. 

Obtenir l'URL ici http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,latin-ext

Vous pouvez également renommer votre alias police-famille personnalisé @ font-face.

Créez une règle CSS simple pour utiliser cette police de ciblage de navigateur/système d'exploitation ou les deux:

.mac .navigation a {    
    font-family: "Custom PT Sans", "PT Sans", sans-serif;
}

Ou 

.mac.webkit p {
    font-family: "Custom PT Sans", "PT Sans", sans-serif;
}

Terminé. Il suffit d’appliquer la règle de famille de police partout où vous en avez besoin.

3
Antonio Max

Différents navigateurs (et FWIW, différents systèmes d'exploitation) utilisent différents moteurs de rendu des polices, et leurs résultats ne sont pas censés être identiques. Comme déjà indiqué, vous ne pouvez rien y faire (à moins, évidemment, de remplacer du texte par des images ou de flasher ou d’implémenter votre propre moteur de rendu à l’aide de javascript + canvas - ce dernier étant un peu excessif si vous me demandez).

2
CAFxX

j'ai trouvé que cela fonctionnait très bien: 

-webkit-text-stroke: 0.7px;

ou

-webkit-text-stroke: 1px rgba(0, 0, 0, 0.7);

faites des essais avec la valeur "0,7" pour l'adapter à vos besoins ..___ Les lignes sont ajoutées à l'endroit où vous définissez la police Bodys.

voici un exemple:

body {
    font-size: 100%;
    background-color: #FFF;
    font-family: 'Source Sans Pro', sans-serif;
    margin: 0;
    font-weight: lighter;
    -webkit-text-stroke: 0.7px;
2
Zeton

J'ai eu le même problème pendant quelques mois. Enfin, vous avez réussi à désactiver les paramètres ci-dessous dans les paramètres du navigateur Chrome.

Définissez "Canevas 2D accéléré" sur "Désactivé" (Dans la barre d’adresse du navigateur, accédez à chrome: // flags # toile-désactiver-accéléré-2d, modifiez le paramètre, relancez le navigateur.)

Étant donné que le correctif de ce problème a clairement changé, je suggérerais en général de désactiver ultérieurement toutes les fonctionnalités de rendu de texte/rendu 2D à accélération matérielle si ce correctif cesse de fonctionner.

Sur Google Chrome 55, ce problème semble avoir été traité à nouveau. Comme prévu, le correctif désactivait l'accélération matérielle, il ne faisait que changer d'emplacement.

Le nouveau correctif (pour moi) semble être:

Paramètres -> Afficher les paramètres avancés ... -> Système DÉCOCHEZ "Utiliser l'accélération matérielle si disponible"

https://superuser.com/questions/821092/chromes-fonts-look-off

0
Bell