Je travaille avec de très grands designers. En traduisant leur design, ils me demandent pourquoi parfois, nous ne rendons pas les polices non système exactement comme décrites dans leurs conceptions. Un exemple très récent peut être affiché dans l'image attachée à cette question (ignorer les annotations rouges):
J'utilise des polices de fonts.com via un JavaScript incluent, ce qui me permet d'utiliser la nouvelle famille de polices de mon CSS. Je veux attirer votre attention sur deux choses:
a) à gauche, remarquez le texte de description "dans un effort de ..." est beaucoup plus audacieux que "lorem ipsum ...". Police est "droid serif w01 italique".
B) À droite, AVIS "Rencontrez un" est beaucoup plus audacieux que "Commerzbank". La famille de polices est "universltw01-57condense 723821".
Je me suis assuré que la police: normale. Et pourtant, les choses ont toujours l'air audacieux sur certains ordinateurs ... et il semble varier en fonction du système d'exploitation et de navigateur. Il semble que la seule façon de modifier le poids de ces polices de manière esthétique est en choisissant une autre variation de la famille de polices comme la version oblique ou condensée (si elles existent). Mais souvent, je ne peux toujours pas obtenir le poids pour rendant correctement sur toutes les différentes combinaisons de système d'exploitation et de navigateur.
Comment goudrez-vous ces problèmes? Y a-t-il des techniques que je peux utiliser pour que les polices rendent exactement comme décrit dans des conceptions quel que soit le système d'exploitation et le navigateur des téléspectateurs?
4 Réponses :
De mon expérience, je trouve toujours que la fonction-rendu sur le Web est nulle part aussi bien que dans Photoshop ou d'autres outils de conception. Cela conduit généralement à des problèmes comme celui-ci.
Dans Photoshop, un designer peut utiliser des paramètres "extra" tels que: "Sharp", "Crisp", "Smooth" et "Strong". Toutes ces variantes rendent la police rendu beaucoup plus agréable. Ces attributs ne sont pas disponibles pour nous en tant que développeurs.
Tout est réduit à l'anti-aliasing des polices que tous les navigateurs implémentent de différentes manières. Il est impossible d'obtenir des polices pour rendre de la même manière sur tous les navigateurs. C'est une raison d'utiliser uniquement des polices spécifiquement créées pour le Web car elles sont conçues pour avoir de bons anti-aliasing sur des écrans de la taille la plus courante.
Il y a cependant des astuces que vous pouvez essayer. Je n'ai que peu d'expérience avec eux, mais j'espère que mes réponses de base et ces liens vous permettront d'inspiration dans l'endroit où trouver plus d'informations sur ce problème complexe.
Pour moi, l'image de gauche ressemble à un problème classique anti-alias. La bonne image, je ne suis pas si sûr. Cela ressemble presque à une autre police et la taille doit être suffisamment grande pour que cela rendit correctement.
Vérifiez ces liens si vous souhaitez lire plus, espérons-le, ils peuvent être utiles:
CSS prend en charge le texte anti-texte -Aliasing tels que "Crisp, Sharp, etc." encore?
Comment faire de la police dans la page Web?
lissage et antialiasing Webfont dans Firefox et Opera
http://blog.typekit.com/ 2010/10 / 21 / Type-Rendu-web-navigateurs /
"The @ font-face CSS at-Rule permet aux auteurs de spécifier des polices en ligne pour afficher du texte sur leurs pages Web. En permettant aux auteurs de fournir leurs propres polices, @ Font-Face élimine le besoin de dépendre du nombre limité de Les utilisateurs de polices ont installé sur leurs ordinateurs. Le @ font-face à la règle peut être utilisé non seulement au niveau supérieur d'une CSS, mais également à l'intérieur de toute règle du groupe conditionnel CSS. " -MDN https: / /developer.mozilla.org/en-us/docs/css/@font-face Ce n'est pas une solution parfaite, mais cela peut vous rapprocher de l'endroit où vous voulez être. < / p>
Cette règle permet -it-elle de prévenir la police d'anti-aliasing et de permettre l'utilisation de polices minces, lisibles et non floues, à n'importe quelle page Web, avec UserContent.css, tout en manipulant correctement les symboles embarqués de polices, qui ne sont pas contenue dans les polices de tahoma, arial ou autre système?
Nous sommes confrontés aux mêmes problèmes que vous avez soulevés et je ne vais pas dupliquer les bonnes informations qui ont déjà été couvertes ici. Anti aliasing et CSS ne font qu'une partie de la photo. Je voulais donc aborder comment les fonderies de caractères et la licence peuvent figurer dans des choses.
sur le côté PC, la réalité des services Webfont comme les polices.com et Typekit signifie généralement des résultats remarquables pire. C'est peu près du navigateur.
Lorsque vous utilisez un service Webfonts, vous êtes à la merci de la manière dont ce service gère la policre de police.
Toutefois, si vous utilisez une police optimisée pour l'utilisation du Web et qu'il est disponible à l'achat où vous pouvez contrôler directement l'intégration des fichiers de polices vous-même, Cet article a un bon conseil pour améliorer le rendu sur chrome pour Windows.
Exemples de fonderies qui vendent (ou Google Webfont à des caractères sans coût) pour l'encrassement direct sont les Fontspring, les myfont, le type commercial, etc.
Hoefler Type Il suffit de faire défaut son propre service de police qui rend magnifiquement sur le PC. Il est similaire à Fonts.com et à Typekit dans le sens où vous n'hôtez ni incorporer des polices directement. Ils sont allés à un niveau sans précédent pour résoudre tous les problèmes communs avec Webfont. Ils ont ajusté l'échelle de leurs poids de police et personnalisés leur déploiement pour des navigateurs individuels. La limitation est, comme beaucoup d'autres fonderies, à propos de maintenant, vous ne pouvez acheter que leurs caractères de caractères.
En raison de ces complications, nous examinerons généralement les options d'utilisation Web de caractères individuels tôt dans un projet.
De l'expérience personnelle et des recherches de haut niveau J'ai constaté que vous pouvez approcher un résultat agréable à l'aide de SIFR (remplacement flash inmancable évolutif) ou d'alternatives javascript pures telles que typeFace ( http://typeface.neocracy.org:81/ ) et Cufon ( http://cufon.shoqolate.com/generate/ ). J'utilise Cufon pendant un moment et je trouve le moyen le plus facile et le plus efficace de se rapprocher des résultats que vous recherchez pour le moment. J'espère que cela aide si vous n'avez toujours pas encore rencontré ces solutions.
Contrairement aux logiciels fantaisistes tels que Photoshop, les navigateurs n'ont pas de moyens avancés de rendre les polices rendant. En général, si vous avez une police normale (non audacieuse) et une police audacieuse que vous souhaitez rendre sur la page, vous devez fournir des fichiers de polices pour les deux, ou vous n'obtiendrez pas les résultats exacts. Il en va de même pour les italiques ou non. Sans ces fichiers supplémentaires, le navigateur émule audacieux ou en italique, et ils le font tous différemment (et généralement mal) et même alors, il n'ya aucun moyen de les amener à avoir l'air identique sur les navigateurs et les oses.
"et il semble varier en fonction de quel système d'exploitation et de navigateur vous êtes sur" - il y a votre clé. Tous les navigateurs rendent toutes les polices différemment. Certains sont tellement mineurs à la différence que ce n'est pas vraiment perceptible.
Off-top: Pourquoi les concepteurs utilisent-ils des polices qui ont l'air floue et gagnent le plus de texte aux pages Web très difficiles à lire? Pourquoi les concepteurs ne peuvent-ils pas utiliser de polices qui ont l'air mince, lisible, non floue et un pixel large (comme Tahoma, Verdana, Arial, etc.) à la taille inférieure à 18 points et 22 pixels? Et pourquoi les concepteurs ont-ils intégré des symboles graphiques spéciaux dans leurs polices personnalisées et ces symboles deviennent des rectangles non dérivés lorsque des polices téléchargeables sont interdites?