hauteur de ligne font-face d'alignement vertical

Question

Je le balisage suivant:

<div class="blockSection"> 
<h5>Title of the section</h5> 
... 
</div> 

maintenant, le h5 pour le .blockSection a une hauteur fixe et une image de fond, 40px. Pour aligner le texte verticalement, je définis toujours la hauteur de ligne comme la hauteur, puisque le texte ne se casse pas en 2 lignes ou plus. Mais le problème est que j'utilise une police avec font-face et je ne veux pas aligner verticalement dans Firefox, Safari sur Mac. Dans les fenêtres IE semble bon.

Quelqu'un connaît l'astuce pour faire les choses correctement, sans appliquer une hauteur de ligne différente pour les navigateurs?

Answer 1

Il semble que conditional comments ferait l'affaire. Créez une feuille de style IE uniquement dans une hauteur de ligne et une feuille de style principale avec la hauteur de ligne pour les autres navigateurs.

Je sais que vous ne voulez pas définir différentes hauteurs de ligne pour différents navigateurs, mais si IE fait ce que vous voulez et que d'autres navigateurs ne le sont pas, c'est la meilleure solution.

Answer 2

Une solution pour le centrage vertical (dans les navigateurs non IE) utilise display: table-cell et vertical-align: middle sur votre h5.

Answer 3

Vous pourriez juste être hors de la chance ... en dehors des hacks pour cibler différentes combinaisons de navigateurs & OS.

"Il n'y a pas de hauteur de ligne idéale pour toutes les fontes web Chaque police de caractères requiert une hauteur de ligne par défaut différente, selon qu'elle soit condensée ou large, qu'elle ait un lettrage serré ou lâche, si ses ascendeurs ou ses descendeurs sont longs ou courts par rapport à la hauteur x etc. - Webfonts.info

Si vous avez concédé sous licence la police à partir de Webfonts, ils ont un constructeur de kit qui vous permet de jouer avec les options de hauteur de ligne. "Bounding Box" a fonctionné pour la police que j'avais là. Plus d'infos ici: http://webfonts.info//webfonts-know-how/part-3-line-height-options-kitbuilder

Une autre option qui est mieux que les feuilles de style conditionnel, car la police peut rendre différemment les différents navigateurs & OS, vous pouvez essayer ce plugin jQuery qui vous permet de détecter des combinaisons de navigateurs & OS, puis appliquer une classe à lui. Pas idéal mais c'est une option.

http://www.icavia.com/2010/09/solving-font-face-alignment-issues/

MISE À JOUR: Une autre option est d'essayer le Font Squirrel Webfont Generator. Si vous avez le droit d'utiliser la police en question, utilisez ce générateur en mode expert et assurez-vous que l'option "Fix Vertical Metrics" est cochée.