css: comment aligner horizontalement des polices de différentes tailles
première question sur SO !
J'essaie de" pixel perfect " aligner horizontalement deux lignes de texte, chaque ligne avec une taille de police différente.
<style type="text/css">
* { font-family: sans-serif;}
div { float: left;}
h1 { font-size: 150px; margin-bottom:-30px; }
</style>
<div>
<h1> B </h1>
<h6> B-L.align </h6>
</div>
<div>
<h1> L </h1>
<h6> L.align </h6>
</div>
exemple ici: http://jsfiddle.net/jgYBD/1/
si vous regardez l'échantillon, vous remarquerez que la police plus grande a plus "?rembourrage?"que la police plus petite. en les faisant désaligner par quelques pixels.
Je cherche un moyen ou une formule pour les aligner parfaitement à gauche, sans utiliser l'essai et l'erreur sur la marge de gauche!
Toutes les idées sont appréciées , merci.
4 réponses
Ce que vous voyez n'est pas de rembourrage, mais une sorte de "crénage" de la police. Pas vraiment, mais en quelque sorte. Le gros gros problème, c'est que c'est différent pour chaque police, et même pour chaque lettre. essayez de remplacer les
<h1>B</h1>
par
<h1>J</h1>
maintenant, l'espace est beaucoup plus petit !
cet espace dépend de la police, la taille et la lettre. Donc, je ne pense pas que vous pouvez contrôler que
comme je l'ai understaind vous u veux?:
h6 {
float: left;
position: relative;
left: 11px;
}
exemple ici : http://jsfiddle.net/jgYBD/4/
Un potentiel astuce: Ajouter :first-letter { margin-left: -0.08em; }. L'em doit être ajusté pour votre police, mais vous pouvez l'appliquer globalement Si vous le souhaitez. Elle entraîne un léger déplacement vers la gauche, mais vous pouvez changer la taille de police de la S1 en toute impunité et il reste alignée.
Voir le mise à jour de votre jsFiddle.
il ne répare pas le problème " J " bien que de sorte qu'il pourrait être un point discutable pour vous.