Je développe donc un site qui devra fonctionner à travers une multitude de navigateurs, qu'elles soient desktop, mobiles ou à quoi avez-vous. Les concepteurs, comme les designers de Mac le feront souvent, ont utilisé Helvetica Neue comme la police de l'ensemble du site. J'essaie de le faire fonctionner via @font Inclusion, et il se présente juste bien .. mais les hauteurs de ligne me donnent un ulcère.
Voir l'image ci-dessous, c'est Arial, Helvetica Neue STD et Helvetica Neue Pro. Windows Chrome gère tous les trois comme un champion, mais le reste ici est extrêmement incompatible. Ils sont tous réglés à la hauteur de la ligne 18px en ce moment, j'ai également essayé la hauteur de la ligne: 1, mais en vain.
Le HTML / CSS J'utilise aux fins de ce test: suis juste mal de chance ici? Je considère simplement en utilisant Arial à ce stade, car essayez de créer des barres d'outils et des boutons où le texte est centré verticalement se révèle être un cauchemar. Je certainement ne veut pas renifler pour le système d'exploitation et le navigateur et écrivez des hauteurs de ligne personnalisées pour chaque élément.
3 Réponses :
S'il vous plaît essayez ceci.
*{
margin: 0px;
padding: 0px;
font-size: 100%;
vertical-align: baseline;
}
Merci pour l'idée, mais pendant que cela resserrait les choses ici et là, la disparité entre les navigateurs reste.
Je peux offrir cette pièce de fond en profondeur sur Pourquoi la ligne La hauteur est une douleur .
en résumé, les différentes manières de gérer les métriques d'espacement vertical pourraient être la cause de ces incohérences. Certains calculent du haut de la police la plus élevée de la police et ajoutent tout espace de ligne sous, tandis que d'autres divisent l'espacement avant et après la ligne de texte.
Je pense que j'ai déjà lu cela auparavant, mais merci pour le lien. On dirait que je suis juste mal de chance, quand ça va à elle. Arial c'est!
Ceci ressemble à un La plupart des fournisseurs de polices vous permettent de mettre à jour et de fixer métriques verticales pour une police avant de le télécharger. Ils peuvent appeler cette option différemment. Par exemple: FontSquirrel appelle IT Metrics verts problème. La police ne s'alignera jamais correctement car elle a des métriques verticales pauvres . La seule façon de rendre la police rendue systématiquement sur les navigateurs est de corriger ses métriques verticales .
Réglez automatiquement les métriques verticales , MYFONTS.COM appelle IT Réglages de la hauteur de la ligne , etc. .
Avez-vous essayé de dimensionner la police et la hauteur de la ligne dans EMS?
@Erik, juste essayé cela, en utilisant 1.1em au lieu de 18px. Il y avait quelques changements de 1px ici et là, mais dans l'ensemble, l'effet est resté identique.
Je pense que ce problème pourrait être plus large puis la hauteur de la ligne. Cela pourrait être la manière dont le navigateur rend la police dans laquelle il pourrait s'agir d'un travail de piratage pour accomplir quelque chose qui devrait être assez simple. Essayez d'inclure une police via Google.com/webfonts pour voir si vous frappez le même problème.