Chrome pas antialiasing texte
Google Chrome n'est pas antialiasing mon texte même si j'ai ajouté du code spécifique à Google Chrome pour le faire.
Sur une note étrange, Firefox, qui a été dit incompatible avec le code que j'avais ajouté fait 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:
Firefox:
Comme vous pouvez le voir ci-dessus (et probablement sur le site web) la police est beaucoup regarder mieux sur Firefox.
7 réponses
Remarque: Chrome 37 et versions ultérieures ont corrigé l'anticrénelage des polices, ce correctif n'est donc plus nécessaire dans la dernière version de Chrome.
Je pense que la meilleure solution est de convertir votre police en svg car chrome rend les polices avec antialiasing si le format de fichier de police est svg.
, Vous pouvez obtenir plus d'infos 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, fondamentalement, vous devez convertir votre police au format svg (en utilisant un convertisseur de polices comme font squirrel fournit) et définissez des requêtes multimédia dans votre css afin que le format de 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.
J'ai écrit une grande réponse à ce sujet ici: y a-t-il un "lissage des polices" dans Google Chrome?. Le poste contient tout ce que vous devez savoir et comment résoudre ce problème. Et c'est un bug officiel dans 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 rendre les polices beaucoup plus attrayantes mieux:
Texte-avc-fix:
-webkit-text-stroke: 1px
Ou
-webkit-text-stroke: 1px rgba(0,0,0,0.1)
Text-shadow-trick:
text-shadow: #fff 0px 1px 1px;
Ou
text-shadow: #333 0px 0px 1px; // for black text
Font-lissage-trick (en combinaison avec ce qui précède):
-webkit-font-smoothing: antialiased;
Remarque: Ces sont des solutions de contournement, pas une vraie solution du problème de base.
C'est un problème avec windows 7/8, pas avec Chrome. Chrome utilisé pour toujours rendre mauvais. Mais ils ont corrigé cela avec build 37. Cependant, il accepte toujours les préférences de rendu des polices windows. Donc, si vous êtes comme moi et désactivez tous les paramètres d'apparence de fantaisie dans windows, vous devrez faire un tweak pour que chrome rende correctement à nouveau.
Pour résoudre ce problème, vous devez configurer les polices de type clair dans windows et activer le lissage des polices dans les performances option.
Allez dans le menu Démarrer.
Recherchez "ajuster le texte ClearType".
Activez ClearType et passez par l'assistant pour choisir vos paramètres. (très facile) cela configure le rendu de texte pour l'étape suivante. (si vous ne configurez pas ClearType, L'étape suivante fonctionnera toujours, mais ClearType semble encore mieux.)
Allez au menu démarrer
Rechercher " ajuster l'apparence et les performances de windows"
Cela ouvre l'écran "Options de performance".
Aller sur le premier onglet "Effets Visuels"
Si vous sélectionnez "Laisser windows choisir" ou "meilleure apparence", alors c'est bien. Cependant, si vous choisissez la meilleure performance, il désactive l'anti-aliasing à l'échelle du système. La plupart des navigateurs (y compris Internet Explorer) ignorent ce paramètre. Google Chrome ne fonctionne pas.
Pour le rallumer, mais laissez les autres options de performance sélectionnez "personnaliser".
-
Au bas de la liste, cochez la case "bords lisses des polices d'écran"
Cliquez sur appliquer
Maintenant fermez et rouvrez chrome. Vous aurez beaucoup mieux à la recherche de texte.
Selon ce blog: http://www.dev-metal.com/fix-ugly-font-rendering-google-chrome/
Il sera corrigé dans Chrome 37. Et il est bon. Je l'ai essayé dans Chrome Canary et cela fonctionne.
Chrome ne prend pas en charge anti aliasé si ce n'est pas un svg, vous devez utiliser text shadow à la place.
.selector{
text-shadow:
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
1px 1px 0 #fff;
}
Il suffit de définir le poids de la police à la normale. 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;
}
J'ai cherché une solution à ce problème pour quelques heures, et finalement j'ai trouvé quelque chose qui fonctionne pour moi, donc je veux le partager avec vous.
Aller à la page chrome://flags/#enable-écriture directe Si DirectWrite est désactivé, activez-le; Si DirectWrite est activé, il suffit de le désactiver;
Dans mon cas, je l'ai activé et cela a très bien fonctionné.
Santé