web-dev-qa-db-fra.com

Chrome pas d'antialiasing du texte

Google Chrome n'anticipe pas mon texte, même si j'ai ajouté du code spécifique pour Google Chrome pour le faire.).

Sur une note étrange, Firefox, qui a été jugé incompatible avec le code que j'avais ajouté ne antialias le texte de manière appropriée.

Voici le style CSS spécifique:

.jumbotron h1 {
    color: white;
    font-size: 100px;
    text-align: center;
    line-height: 1;
    /*
     * Webkit only supported by Chrome and Safari.
     */
    -webkit-font-smoothing: antialiased;
}

Chrome:

https://dl.dropboxusercontent.com/u/26438996/guru/guru-chrome.png

Firefox:

https://dl.dropboxusercontent.com/u/26438996/guru/guru-firefox.png

Comme vous pouvez le voir ci-dessus (et probablement sur le site Web), la police est beaucoup plus esthétique sur Firefox.

htmlcssgoogle-chromefirefox
34
Jire

REMARQUE: Chrome 37 et versions ultérieures, l'antialiasing des polices est corrigé. Ce correctif n'est donc plus nécessaire dans la dernière version de Chrome.

Je pense que la meilleure solution consiste à convertir votre police en svg car chrome rend les polices avec antialiasing si le format du fichier de police est svg.

Vous pouvez obtenir plus d'informations ici dans l'article où j'ai trouvé la réponse moi-même: http://www.adtrak.co.uk/blog/font-face-chrome-rendering/

Donc, en gros, vous devez convertir votre police au format svg (à l’aide d’un convertisseur de polices comme police squirrel fournit) et définir des requêtes multimédias dans votre css afin que le format du fichier svg soit spécifié en premier dans votre déclaration de police pour chrome, mais pas pour les autres navigateurs.

/* This is the default font face used for all browsers. */
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.eot');
src: url('../../includes/fonts/chunk-webfont.eot?#iefix') format('eot'),
url('../../includes/fonts/chunk-webfont.woff') format('woff'),
url('../../includes/fonts/chunk-webfont.ttf') format('truetype'),
url('../../includes/fonts/chunk-webfont.svg') format('svg');
font-weight: normal;
font-style: normal;
}

/* This font face inherits and overrides the previous font face, but only for chrome */
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'chunk-webfont';
src: url('../../includes/fonts/chunk-webfont.svg') format('svg');
}

Et voilà. La police fonctionne dans Chrome avec antialiasing.

38
sboisse

J'ai écrit une grande réponse à ce sujet ici: Existe-t-il un "lissage des polices" dans Google Chrome? . Le message contient tout ce que vous devez savoir et comment résoudre ce problème. Et ceci est un bogue officiel de Google Chrome, les développeurs du navigateur le savent déjà et travaillent sur un correctif.

En bref, vous pouvez ajouter ceci à votre règle de texte pour améliorer l'apparence des polices:

text-stroke-fix:

-webkit-text-stroke: 1px

ou

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

texte-ombre-tour:

 text-shadow: #fff 0px 1px 1px;

ou

 text-shadow: #333 0px 0px 1px; // for black text

astuce de lissage des polices (en combinaison avec ce qui précède):

-webkit-font-smoothing: antialiased;

Remarque: il s'agit de solutions de contournement et non d'une solution réelle du problème de base.

34
Sliq

Ceci est un problème avec Windows 7/8, pas avec Chrome. Chrome rendait toujours le rendu incorrect. Mais cela a été corrigé avec la version 37. Toutefois, il accepte toujours les préférences de rendu des polices Windows. Donc, si vous êtes comme moi, désactivez tous les paramètres d'apparence sophistiqués de Windows. alors vous aurez besoin de faire un Tweak pour obtenir chrome pour restituer correctement à nouveau.

Pour résoudre ce problème, vous devez configurer les polices de type Clear dans Windows et activer le lissage des polices dans les options de performances.

    • aller au menu de démarrage.

    • recherchez "Adjust ClearType Text".

    • activez ClearType et passez par l’assistant pour choisir vos paramètres. (très facile) cela configure le moteur de rendu de texte pour l'étape suivante. (Si vous ne configurez pas ClearType, la prochaine étape fonctionnera toujours mais ClearType est encore meilleur.)

    • aller au menu de démarrage

    • rechercher "Ajuster l'apparence et les performances des fenêtres"

    • cela ouvre l'écran "Options de performance".

    • aller au premier onglet "Effets visuels"

    • si vous sélectionnez "Laisser les fenêtres choisir" ou "Meilleure apparence", alors tout va bien. Toutefois, si vous choisissez les meilleures performances, il désactive le système anti-aliasing. La plupart des navigateurs (y compris Internet Explorer) ignorent ce paramètre. Chrome ne le fait pas.

    • pour le réactiver, mais laissez toutes les autres options de performances, sélectionnez "personnalisé".

    • près du bas de la liste, cochez la case en regard de "Lisser les bords des polices d'écran"

    • appuyez sur appliquer

Maintenant, fermez et rouvrez le chrome. Vous aurez beaucoup plus beau texte.

16
guymella

Selon ce blog: http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/

Il sera corrigé dans Chrome 37. Et il a raison. Je l'ai essayé dans Chrome Canary et cela fonctionne.

3
sboisse

Il suffit de définir le poids de la police sur Normal. Cela semble résoudre le problème dans Chrome.

donc mon CSS qui fonctionne pour moi est:

h1.hero-title {
font-family: 'Typefacename', cursive;
font-size:7em;
-webkit-font-smoothing: antialiased;
font-weight:normal;

}

1
David Vaassen

Chrome ne prend pas en charge l'anticrénelage si ce n'est pas un svg, vous devez utiliser l'ombre du texte à la place.

. sélecteur {
 texte-ombre: 
 -1px -1px 0 #fff, 
 1px -1px 0 #fff, 
 -1px 1px 0 #fff, 
 1px 1px 0 #fff; 
}
1
Deandré Thomas

Cela fait quelques heures que je cherche une solution à ce problème précis et, finalement, j'ai trouvé quelque chose qui fonctionne pour moi, alors je veux le partager avec vous.

Allez à chrome: // flags/# enable-direct-write Si DirectWrite est désactivé, activez-le; Si DirectWrite est activé, désactivez-le;

Dans mon cas, je l'ai activé et cela a bien fonctionné.

À votre santé

0
overRideKode