web-dev-qa-db-fra.com

L'utilisation d'une police d'icônes (Font Awesome) semble un peu floue et trop audacieuse

J'utilise Font Awesome pour créer des icônes sur mon site. Bien qu'elles soient fantastiques sur l'iPod Touch avec écran Retina, sur mon iMac, elles sont un peu floues et moins définies.

Voici une image à démontrer:

enter image description here

Comme vous pouvez le constater, la police a vraiment l’air agréable et nette sur l’iPod Touch de Retina Display, mais sur l’iMac, c’est un peu nul. 

Qu'est-ce qui cause ça? Est-ce à voir avec anti aliasing ? Y a-t-il quelque chose que je puisse faire à ce sujet?

cssfontsfont-awesome
22
shrewdbeans

Des problèmes de ce type sont probablement liés à l'anti-aliasing ou aux allusions. Les polices doivent être alignées sur une grille si elles espèrent être belles avec des tailles plus petites. Les gars de GitHub ont écrit un bon article blog sur la façon dont ils géraient la propreté dans leur police personnalisée.

J'essayerais de l'aligner sur une grille et de suivre les traces du peuple GitHub. Ils ont fait du bon travail sur leurs icônes.

De plus: les icônes ont-elles des tailles numériques différentes entre l'iPod Touch et l'iMac, ou s'agit-il d'un effet secondaire lié à différents paramètres DPI? Cela peut également être un problème avec le rendu des polices.

Si possible, jouez avec vos paramètres DPI. Je n'utilise pas de Mac, donc je ne sais pas comment changer ces paramètres. Cela ne résoud toujours pas le problème de grille sous-jacent, cependant. Pouvez-vous modifier la ou les polices en question?

21
user1519537

En ajoutant à la réponse de @ sporkbox, si vous êtes particulièrement préoccupé par les navigateurs Webkit, vous pouvez choisir d'utiliser les options CSS suivantes:

font-smooth: auto | never | always | <absolute-size> | length | initial | inherit
-webkit-font-smoothing : none | subpixel-antialiased | antialiased
13
Alexander Chen

J'ai constaté que certains navigateurs essayaient d'imiter une police en caractères gras lorsqu'il n'y avait pas de poids en gras en rendant les lignes plus épaisses, ce qui donnait un résultat similaire à celui que vous décrivez. Êtes-vous sûr que cela apparaît quelque part où vous avez font-weight: normal;?

4
gterez

La meilleure solution multi-navigateurs est:

.your_font_class{
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
2
Marconi

il y a un truc étrange qui fonctionne parfois, essayez:

-webkit-transform:rotateZ(0);
-moz-transform:rotateZ(0);
-o-transform:rotateZ(0);
transform:rotateZ(0);

si vous avez un bloc centré, essayez de vérifier si le décalage gauche est un entier. Vous pouvez utiliser Javascript pour vérifier et résoudre le problème. Je peux t'aider si tu veux.

2
Paulo Rodrigues

-webkit-perspective: 1000;

Résolu pour moi

1
Ben Taliadoros

Certaines des solutions mentionnées avant kinda/sorta ont fait l'affaire mais ce qui a été résolu pour moi a été de supprimer (commenter) l'héritage de taille de police de la classe "fa" dans font-awesome.css (et font-awesome.min.css) :

font-size: inherit;

Le résultat final de la classe ressemble à ceci:

.fa {
  display: inline-block;
  font: normal normal normal 14px/1 FontAwesome;
  /* font-size: inherit; */
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

En plus de cela, j'ai dû ajuster les grandes icônes car elles étaient trop poussées vers le bas en commentant cette ligne de la classe "fa-lg":

vertical-align:-15%

La classe ressemble à ceci

.fa-lg {
  font-size: 1.33333333em;
  line-height: 0.75em;
  /* vertical-align: -15%; */
}

J'utilise Font Awesome 4.7.0

0
phoenix

Utilisez le lissage de police css:

-webkit-font-smoothing: antialiased;
0
Kinglybird