Pourquoi mon texte font-face est-il si audacieux?
Voici une image du design Photoshop de la page Web:
Et la page Web avec la même taille, le poids, etc.:
Comme vous pouvez le constater, le rendu du texte sur le rendu Web est beaucoup plus épais, au point où il ressemble presque entièrement à une police différente.
Voici le code @ font-face qui accompagne le texte:
@font-face {
font-family: "PT Sans";
src: url('fonts/151428223-PTS55F.eot');
src: url('fonts/151428223-PTS55F.eot?#iefix') format('embedded-opentype'),
url('fonts/151428223-PTS55F.svg#PT Sans') format('svg'),
url('fonts/151428223-PTS55F.woff') format('woff'),
url('fonts/151428223-PTS55F.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
... et, pour référence, les paramètres du texte dans Photoshop:
Vous utilisez la police PT Sans dans Photoshop alors vous avez déjà installée la police sur votre PC. Vous pouvez essayer de supprimer le code @ font-face et de charger la police PT Sans installée sur votre PC. Il s'agit du même fichier de police que vous utilisez dans Photoshop pour vérifier si le problème se produit en raison de l'utilisation du code @ font-face ou @ Fichiers au format font-face. (par exemple, sans @ font-face et sans css supplémentaire)
<head>
<style>
body {
font-family: "PT Sans";
font-weight: normal;
font-style: normal;
font-size: 28px;
color: #454545;
text-align: center;
}
</style>
</head>
<body>
<p>SOME FINE LOOKING TEXT <b>RIGHT HERE</b></p>
</body>
Vous pouvez également essayer PT Sans de Google Fonts .
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
(Copiez le code ci-dessus en tant que premier élément du <head> de votre document HTML.)
En ce qui concerne -webkit-font-smoothing, je ne pense pas que cela fasse une différence majeure, mais vous pouvez lire un bon article à ce sujet.
Amélioration du texte terne dans WebKit - de Chris Coyier.
J'ai Photoshop CC (2014) et j'ai téléchargé et installé le PT Sans depuis Google Fonts et j'ai testé le problème moi-même en utilisant le code HTML ci-dessus et voici les résultats:
1 - Votre image et 2 - Mon Photoshop CC 2014 (Anti-aliasing Smooth)
Comme vous pouvez le voir ci-dessus, le texte est rendu différemment selon les navigateurs et l'anti-aliasing dans Photoshop. Si vous obtenez les mêmes résultats et que vous avez presque la même police de caractère, c'est que Mon point est:
Les périphériques Windows, Linux, OS X et Mobile peuvent (chacun) disposer de moteurs de rendu de texte différents. Sans oublier que différents navigateurs ont chacun leur propre rendu de texte par défaut. Il n’est donc pas garanti que le rendu de votre police sera affiché comme prévu sur le système de l’utilisateur. - by CSS-Tricks rendu de texte
BTW il me semble bien ... :)
Pour plus d'informations :
Un examen plus attentif du rendu des polices - de Tim Ahrens
BONNE CHANCE!
Tout d’abord, avez-vous essayé de manipuler avec la propriété font-weight? Il peut avoir plus que les valeurs normal et bold. Vous pouvez essayer de le régler sur 100, 200, ..., 900 et voir si le poids de la police change (je pense que cela dépend de la police que vous utilisez).
Deuxièmement, vous pouvez essayer d'ajouter l'un des éléments suivants à cette police: -webkit-font-smoothing: none;, -webkit-font-smoothing: antialiased; ou -webkit-font-smoothing: subpixel-antialiased;.
Vous devriez avoir des déclarations @font-face séparées pour les poids de police normaux et gras que vous utilisez (l'exemple en haut n'en répertorie qu'un), par exemple.
@font-face {
font-family: "PT Sans";
src: url('fonts/PTSans-Regular.eot');
src: url('fonts/PTSans-Regular.eot?#iefix') format('embedded-opentype'),
url('fonts/PTSans-Regular.woff') format('woff'),
url('fonts/PTSans-Regular.ttf') format('truetype'),
url('fonts/PTSans-Regular.svg#PTSansRegular') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "PT Sans";
src: url('fonts/PTSans-Bold.eot');
src: url('fonts/PTSans-Bold.eot?#iefix') format('embedded-opentype'),
url('fonts/PTSans-Bold.woff') format('woff'),
url('fonts/PTSans-Bold.ttf') format('truetype'),
url('fonts/PTSans-Bold.svg#PTSansBold') format('svg');
font-weight: bold;
font-style: normal;
}
De plus, le CSS ci-dessous devrait améliorer le rendu -
.selector {
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
Remarque: le PT Sans standard n’est disponible qu’en poids réguliers et en gras.
Chrome rend beaucoup de polices assez grasses. Malheureusement, nous avons eu recours au préfixe de fournisseur pour résoudre les polices ne présentant pas le même rendu que dans les applications de conception. Ceci est fondamentalement standard dans la plupart de nos sites: /
Nous utilisons un espace réservé au cas où nous aurions besoin d'activer/désactiver rapidement la solution de contournement (SCSS):
%fix-fatty-fonts {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
html, body, button, input, select, textarea { @extend %fix-fatty-fonts;}
Vos polices ont une apparence affreuse dans Chrome - voici la solution est un article éclairant sur la question.
Je suppose que vous utilisez la police sur une balise de titre. Si tel est le cas, essayez de définir une taille de police plus légère:
h1 {
font-family: "PT Sans";
font-weight: lighter;
}
Puisque PT Sans est une police TTF et que la licence permet la modification, vous pouvez modifier l’apparence d’une petite taille en traitant les fichiers avec http://www.freetype.org/ttfautohint/ (petite taille signifie cela aura peu d'effet visible sur les écrans à haute densité de pixels, car ceux-ci n'ont pas besoin d'indications pour rendre les formes de police correctes).
Différentes plates-formes logicielles traiteront différemment les polices dépourvues d'indices, et presque aucune police n'est complètement suggérée. En ajoutant des astuces aux fichiers de polices, vous pouvez forcer un rendu particulier lorsque l’écran manque de pixels, il existe de nombreuses options dans ttfautohint pour ajuster le type de rendu que vous préférez (vous pouvez obtenir le même résultat sous Linux sans modifier les polices, car le moteur de rendu est paramétrable via fontconfig).
Bien sûr, cela remplacera les indications que peuvent contenir les fichiers de polices. Par conséquent, si le créateur de la police se préoccupait d'ajuster certaines combinaisons de glyphes avec des astuces manuelles astucieuses, les astuces automatisées pourraient bien se détériorer.
ok, si ce problème se produit dans un navigateur basé sur -webkit. Ensuite, vous pouvez ajouter ces propriétés pour réinitialiser l'épaisseur.
-webkit-text-stroke: 0.25px;
Il semblerait que vous rendiez "PT Sans" dans votre projet. Normalement, la plupart des polices sont fournies avec différents poids. Vous pouvez prendre des polices à partir de polices google plutôt que de les restituer sur votre site. vous pouvez ensuite utiliser l’épaisseur de chaque police pour répondre à vos exigences, telles que gras, normal ou clair, et pour obtenir la même apparence dans Photoshop et sur le Web, essayez cette propriété de rendu de texte css.
.your-class {text-rendering: optimizeLegibility;}
Bonne chance :)
Essayez ce qui suit:
.YourTextClass {
-webkit-transform:translateZ(0);
transform:translateZ(0);
}
Si vous animez le texte, etc., vous pouvez évidemment le remplacer dans les classes ultérieures, mais vous risquez également de rencontrer des problèmes d'index Z lorsque vous l'utilisez, gardez bien cela à l'esprit si vous remarquez que des éléments disparaissent. est z-index: 1 ou 2 ou quoi que ce soit, séquentiellement parlant.
J'espère que cela pourra aider!
Comment avez-vous défini l'anti-aliasing dans PS? C’est probablement pour cette raison qu’il est différent en PS, puis dans un navigateur. Le problème est que tous les navigateurs affichent le texte différemment, malheureusement. Et vous ne pouvez pas définir l'anti-aliasing. Cela peut être intéressant pour vous: http://blog.typekit.com/2010/10/21/type-rendering-web-browsers/
body {
text-rendering: optimizeLegibility;
}