Comment faire pour que les polices s'affichent de la même manière sur différents navigateurs Web?

Je construis un site Web pour un client et nous espérions utiliser du texte brut, pas des images dans la barre de navigation. La police que nous utilisons est Century Gothic (je pense que cette police est disponible sur la majorité des PC et Mac) Le problème est que, sur différents navigateurs, la police est très différente. Dans Chrome, nous l'avons obtenu comme nous le voulons, mais dans Firefox, le texte est plus petit et plus audacieux.

Outre l'écriture de javascript spécifique au navigateur pour modifier les propriétés de la police, existe-t-il d'autres options pour normaliser la façon dont les polices sont rendues entre les navigateurs. Peut-être une bibliothèque ou une API? Peut-être s'agit-il d'être plus précis dans la déclaration des propriétés des polices? Honnêtement, je suis coincé et j'ai besoin d'aide.

website-design fonts cross-browser

— Zach Lysobey
source

Réponses:

Vous n'obtiendrez pas de polices et d'autres choses pour un rendu identique sur tous les navigateurs. La gestion des polices en est un parfait exemple. Je sais que Safari sur Windows aime mettre du texte en gras pour une raison quelconque. Malheureusement, c'est ainsi que le Web fonctionne. La variété de navigateurs, de systèmes d'exploitation, de moniteurs, de processeurs graphiques, etc., signifie qu'il existe potentiellement des milliers ou des dizaines de milliers de façons différentes pour une personne de visualiser une page Web. Donc, lorsque vous construisez pour le wbe, vous devez le faire en sachant et en attendant que votre site ne soit pas parfait pour tout le monde. Ce n'est pas imprimé. C'est le web sauvage sauvage.

— John Conde
source

Oui, il semble que ce soit la triste réalité. Il semble cependant qu'il devrait être possible pour quelqu'un d'écrire un morceau de javaScript qui rendrait les choses un peu plus proches de la normalisation.

— Zach Lysobey

Malheureusement, ce n'est pas un problème de code mais un problème logiciel et matériel. C'est ainsi que les navigateurs sont développés et avec l'accélération matérielle à venir, cela va empirer (bien que vos polices soient plus fluides pour ceux qui l'ont activé).

— John Conde

Cet article (et les autres de la même série) explique les problèmes en détail, si vous êtes curieux. blog.typekit.com/2010/12/17/…

— paulmorriss

Sélectionnez votre réponse au mieux. Vous dites que ce n'est pas un problème de code, mais certainement quelqu'un pourrait écrire du code afin qu'une seule ligne de texte soit étirée à une largeur minimale en pixels. Cela améliorerait considérablement cette situation. Il pourrait tester la largeur <p> rendue et augmenter l'espacement des lettres en conséquence. Peut être?

— Zach Lysobey

@Zach - Vous pouvez surmonter de nombreux obstacles avec une certaine planification et un codage intelligent. Mais en fin de compte, nous ne pouvons avoir qu'un tel contrôle. Fondamentalement, si vous pouvez accepter des problèmes comme Safari sur Windows et coder le reste, vous devriez bien.

— John Conde

En fait, il existe une méthode d'incorporation de polices dans votre CSS. C'est extrêmement simple. Reportez-vous à http://randsco.com/index.php/2009/07/04/p680 pour plus d'informations sur la façon de procéder. L'inconvénient est que les anciens navigateurs (pre ei 7 et ff 3 je pense ...) ne le supportent pas. Mais le nombre de personnes utilisant ces anciens navigateurs diminue rapidement et il est toujours possible de spécifier des polices alternatives qui fonctionneraient et sont généralement sur la plupart des PC au cas où.

Une autre approche que je n'ai pas utilisée consiste à utiliser le flash. Je n'ai pas beaucoup d'informations à ce sujet à part ce que je sais.

— Kenneth
source

Sur la note css, assurez-vous d'utiliser uniquement des polices que vous ne violerez pas les droits d'auteur si cette police est prise par quelqu'un d'autre comme lorsque vous utilisez la méthode css, ce fichier de police est disponible pour tous ceux qui peuvent accéder à votre site Web.

— Kenneth

Cette méthode Flash est appelée sIFR . Il a ses avantages et ses inconvénients.

— John Conde

Comme cela a été mentionné dans l'autre réponse, même en utilisant cette approche, il y aura de légères différences entre les navigateurs et les systèmes, mais il y a des choses que vous pouvez faire avec le reste de la conception de votre site qui peuvent compenser et rendre le site bien dans toutes les différentes configurations. Un élément clé est d'avoir plusieurs navigateurs et de préférence des systèmes d'exploitation pour tester vos sites.

— Kenneth

Comme d'autres l'ont déjà noté, nous n'avons pas un contrôle total. Mais je pense qu'il convient de mentionner quelques éléments que je trouve utiles pour que les navigateurs rendent les choses de manière similaire dans l'ensemble. Les deux sont des choses "de retour aux sources" que beaucoup d'entre vous font déjà, mais je pensais qu'elles méritaient d'être mentionnées car les fondations sur lesquelles vous bâtissez vous préparent souvent au succès ou à l'échec ...

Réinitialisation CSS. Le concept est simple, vous définissez les valeurs par défaut des balises HTML dans une feuille de style pour définir un point de départ commun pour le rendu HTML. Voici un article et un exemple: http://meyerweb.com/eric/tools/css/reset/

Déclaration de Doctype. http://htmlhelp.com/tools/validator/doctype.html

— ph33nyx
source