web-dev-qa-db-fra.com

Comment rendre les polices thin plus facilement dans CSS 3 sous Windows?

Lorsque j'ai conçu mon site Web dans Adobe Flash Pro CS6, la police ressemble à ceci:

Font rendered in Adobe Flash Pro CS6

La police est lisse et légèrement plus épaisse, et lorsque je crée du HTML et du CSS pour restituer la police dans un navigateur, elle apparaît comme suit, respectivement dans IE, Firefox et Chrome.

Font rendered in IE, Firefox, and Chrome browsers

Il semble plus mince et pixelisé dans certaines zones. J'ai constaté un rendu de police beaucoup plus fluide sous OS X. Comment puis-je rendre la police plus lisse dans ces navigateurs? Je suppose que c'est un problème avec ClearType, qui a l'air hideux avec des polices minces comme celle-ci.

Voici le code que j'utilise pour tester, donc les réponses peuvent être testées avant d'être postées:

<html>
    <head>
        <link href='http://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css' />
    </head>
    <body>
        <span style="color: #333; font-family: Lato; font-size: 32px;">Question or concern?</span>
    </body>
</html>
html5css3webfontsrendering
35
Phoenix Logan

Vous n'obtiendrez jamais des sites identiques dans différents navigateurs ou systèmes d'exploitation, ils utilisent des technologies différentes, etc.

C'est quelque chose qui ne devrait pas vraiment vous intéresser . Les personnes qui utilisent IE ne passeront pas à Firefox ou Chrome ou vice-versa. Elles sont habituées à l'aspect des polices et ne le remarquent pas.).

Les incohérences des navigateurs sont une chose avec laquelle les développeurs front-end doivent vivre (malheureusement). C'est génial s'ils se ressemblent tous mais ça ne va pas arriver

Les choses que vous pouvez essayer, vous aurez probablement besoin de correctifs différents pour les différents navigateurs.

text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;

Edit 1: DirectWrite est maintenant sur chrome pour les fenêtres qui amélioreront le rendu .

Éditer 2 (2017): Polices de l'interface utilisateur système

Vous pouvez également essayer d’utiliser les polices système pour améliorer l’UX.

font-family: -Apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;

Lecture - smashingmagazine
Readup - booking.com
Readup - medium

69
Rick Lancee

rendu de texte: optimisationLégibilité applique un crénage à la police, ce qui peut améliorer la lisibilité, mais uniquement si la résolution de l'affichage et la taille de la police sont suffisamment élevées. Cela ne rend pas la police plus audacieuse si elle était trop mince auparavant.

Le problème ici pourrait être lié aux familles de polices ayant ne ou plusieurs faces qui sont plus claires que la normale (police-weight: 400 ) - comme Googles Lato.

Si vous chargez toute la lumière sur les faces régulières de Lato comme ceci

@import url(http://fonts.googleapis.com/css?family=Lato:100,200,300,400);

J'ai remarqué que la plupart des navigateurs Windows et Chrome OSX utilisent font-weight: 100 si vous spécifiez un paramètre plus léger que 400 - (ou normal, normal). Modification du poids de la police: 200 ou 300 ne rend pas la différence, bien que les outils de l'inspecteur insistent pour que la machine affiche, par exemple, le poids de la police: 200.

Supprimer les poids plus légers (100 dans mon cas) résout le problème et me permet au moins d'utiliser police-weight: 200, respectivement. Le rendu n'est pas absolument identique sur tous les navigateurs, mais au moins similaire.

@import url(http://fonts.googleapis.com/css?family=Lato:200,300,400);

Bien entendu, cela ne résout pas le problème actuel de ne pas pouvoir accéder aux grammages de polices légers spécifiés.

6
Alex Koch

Il n'y a pas de solution unique pour cela, à ma connaissance. Plusieurs correctifs sont mis en œuvre pour convenir à chaque navigateur, sauf IE. Donnez-leur un coup de feu:

Pour Chrome et tout autre navigateur utilisant webkit:

-webkit-font-smoothing:antialiased !important;

Placez-le dans votre code CSS html ou pour tous les éléments qui vous conviennent. Vous pouvez également ajouter ceci avec ce qui précède:

text-shadow:1px 1px 1px 1px rgba(0,0,0,0.005);

Expérimentez avec différentes valeurs alpha, mais vous devriez conserver les tailles d'ombre telles qu'elles sont.

Je ne suis au courant de rien d'autre que vous puissiez faire, mais cela devrait résoudre le plus gros problème avec Chrome à tout le moins (plus d'autres navigateurs Webkit).

5
Hiigaran

Je trouve que dans Google Chrome vous pouvez ajouter -webkit-text-stroke pour améliorer l'apparence des polices.

par exemple:

-webkit-text-stroke: .025em rgba(51,51,51,0.50);

5
jono

Je pense que c'est plus un problème de Windows qu'un problème de navigateur. Les mêmes navigateurs affichent les mêmes polices de manière beaucoup plus fluide sur d’autres systèmes d’exploitation tels que Linux ou Mac.

Dans Chrome, et par extension à tout navigateur Webkit, vous pouvez utiliser le code suivant pour lisser vos polices:

-webkit-font-smoothing: antialiased;

ou

-webkit-font-smoothing: antialiased !important;

En règle générale, je trouve que cela ne fait pas beaucoup. Je pense que nous devrons simplement attendre que Microsoft fasse quelque chose à ce sujet.

2
Cameron Brown

J'utilise ceci sur tous les sites et cela couvre la plupart des problèmes de rendu des polices.

text-rendering: optimizeLegibility !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
2
Tyrone

J'ai récemment rencontré un problème similaire: la même famille de polices et la même taille avaient une apparence différente sous Chrome, Safari et Firefox. Le chrome et firefox ont l’air particulièrement épais. Ce n’est peut-être pas la meilleure solution, mais a fonctionné pour moi.

-webkit-font-smoothing: antialiased;
-moz-font-smoothing: unset;
-moz-osx-font-smoothing: grayscale;
font-smoothing: antialiased;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;

En outre, il vaut la peine de vérifier différents moteurs de rendu. CSS Que sont -moz- et -webkit -?

2
Isaac Guan

Vous pourrez peut-être résoudre ce problème en utilisant la propriété css text-rendering.

Exemple:

text-rendering: auto
text-rendering: optimizeSpeed
text-rendering: optimizeLegibility
text-rendering: geometricPrecision
text-rendering: inherit

Vous voudrez probablement utiliser le rendu de texte: optimiserLegibilty.

Plus d'informations ici: MDN Text-Rendering

1
Ryan Ausel

Je vais préfixer cela avec un hack et je n'aime pas ça, mais ça marche

transform: rotate(-0.0002deg)

Il rend les polices remarquablement lisses, bien que légèrement plus minces

0
Luke Robertson