Correction de la hauteur de ligne de police personnalisée avec CSS
J'ai rencontré un problème étrange lors de l'utilisation d'une police personnalisée sur une nouvelle application Web sur laquelle je travaille.
Cette police personnalisée (FF DIN) semble avoir une hauteur de ligne décentrée naturellement verticale, ce qui me force à rajouter du hack de rembourrage pour compenser l'espace supérieur sur l'élément, comme le bouton et l'entrée.
Exemple: la police en vert (Helvetica Neue) est correctement alignée, la police personnalisée utilisée (FF DIN) étant décentrée verticalement:
Existe-t-il un moyen connu de résoudre ce problème de centrage sur le CSS naturellement, de manière à forcer le comportement de base des polices?
Je vous remercie.
En fin de compte, je corrige moi-même la police manuellement, à l'aide de cette réponse:
Le problème ici n'est pas la hauteur de ligne, mais le placement vertical des glyphes, en particulier l'emplacement de la ligne de base du texte. C’est quelque chose que le concepteur de polices a décidé; le concepteur dessine des glyphes et les place dans le carré em, le dispositif conceptuel dont la hauteur est égale (ou définie) à la hauteur de la police. En particulier, le concepteur décide de l’espace disponible d’une part du côté inférieur à la ligne de base et de l’autre au dessus de la hauteur des lettres majuscules. Généralement, ces espaces sont égaux, ou presque, mais ils ne doivent pas nécessairement l'être. Si elles sont substantiellement différentes, l'utilisation prévue de la police est probablement spéciale et n'inclut pas une utilisation semblable à celle présentée dans l'image. Cela suggère que le choix de la police doit être reconsidéré, mais supposons qu’il soit corrigé.
Il y a plusieurs façons de traiter le problème. S'il y a trop d'espace sous les lettres, la réduction de line-height le réduit, mais cela affecte également l'espace situé au-dessus. Le rembourrage supérieur aide dans un sens, mais il augmente la hauteur totale occupée par l'élément. Vous pouvez également jouer avec vertical-align, mais cela affecte la hauteur des cases de la ligne.
La méthode la plus simple consiste probablement à utiliser positionnement relatif , en supposant que le problème concerne un texte à une ligne. Le positionnement relatif déplace simplement le contenu d'une manière spécifiée, sans affecter la mise en page autrement. Pour cela, vous aurez besoin d’un wrapper, c’est-à-dire d’un élément contenant le texte, de sorte que vous puissiez déplacer uniquement le texte, pas l’arrière-plan.
La démo suivante utilise une police Google, Candal, qui a un problème similaire, mais dans une direction différente: la ligne de base est trop basse. Les modifications de cette approche pour répondre au problème initial devraient être évidentes, mais le montant exact du déplacement doit être déterminé de manière empirique (ou à partir d'informations extraites du fichier de polices à l'aide d'un inspecteur de polices). Naturellement, l'unité em devrait être utilisée ici, même si vous définissez la taille de la police en pixels ou en points (afin que le code n'ait pas besoin d'être modifié si la taille de la police change un jour).
<link href='http://fonts.googleapis.com/css?family=Candal' rel='stylesheet'>
<style>
div { font-family: Candal }
div { background: lightgreen; font-size: 200%}
</style>
<p>What we have got initially:
<div>BRAKE HOSE AND AIR CHAMBER</div>
<p>Reducing line height (even “setting solid”) does not really help:
<div style="line-height: 1">BRAKE HOSE AND AIR CHAMBER</div>
<p>But displacing the text upwards by 0.1em does:
<div><span style="position: relative; bottom: 0.1em">
BRAKE HOSE AND AIR CHAMBER</span></div>J'ai déjà eu ce problème par le passé, même différents navigateurs donnaient des hauteurs de ligne différentes! Je pense que cela se produit lors de l'utilisation du générateur de police Web et ne peut être corrigé qu'en utilisant une hauteur de ligne différente, à ma connaissance.
Avez-vous essayé Fontsquirrel? Il y a quelques options avec des résultats différents.
http://everythingfonts.com/font-face
Dans Chrome, j'ai constaté que si vous utilisez une déclaration font-face. Vous pouvez résoudre le problème de hauteur de ligne avec un style = "" appelant le code HTML ou en déclarant simplement la hauteur de ligne APRÈS la déclaration de police dans votre CSS.
Je pense que Chrome ne sait tout simplement pas comment calculer la hauteur de ligne avant d'avoir rendu la police personnalisée.
C'est quelque chose que j'ai rencontré récemment. La ligne de base des polices que j'utilisais pour une raison quelconque ne s'alignait pas. Je me suis donc aligné vers le bas et j'ai augmenté la hauteur de la ligne au lieu d'ajouter un remplissage.
C’est ainsi que j’ai résolu mon problème. Si vous avez un lien vers un stylo à code, je peux vérifier si cela fonctionnera pour vous ou si une autre solution serait meilleure.
p {
vertical-align: text-bottom;
line-height: 1.5;
}