@ Problèmes de hauteur de police intégrée à la police

Question

Problèmes avec l'alignement CSS du texte généré avec @ font-face. Pour une raison quelconque, il y a une tonne d'espace supplémentaire visible au bas de chaque lettre, étirant la boîte contenant le texte trop loin vers le bas.

Si vous inspectez le texte sur this sample page, vous pouvez voir ce que je veux dire.

Avoir googlé et inspecté un tas d'autres pages, mais celui-ci me suis perplexe. Une chance que quelqu'un puisse aider?

Merci!

Answer 1

Pour commencer, le calculé line-height est 65px, donc vous pouvez toujours définir à être 60px si vous voulez.

Cependant, la plus grande partie de cet espace est réellement requise par la police que vous avez choisie. Bien que vous l'ayez converti en majuscules avec votre CSS, la police a toujours besoin d'espace pour rendre les caractères qui se trouvent en dessous de la ligne de base du texte. Essayez d'ajouter une virgule au texte de cette en-tête, et vous verrez que c'est en fait assez énorme et devrait remplir la plus grande partie de l'espace vide.

Answer 2

Vous utilisez la balise <h2> ici. pour les balises h utilisent la marge et le remplissage du style CSS pour supprimer ces espaces supplémentaires.

<style> 
h2 { 
    margin:0; 
    padding:0; 
} 
</style>