18034 sujets

Questions générales et questions de débutants

[Résolu] Corriger décalage vertical police font-face

Bonjour à tous,

J'ai débuté l'intégration d'un site avec de l'Arial : les textes de mes boutons étaient parfaitement centrés verticalement. et tout semblait aller dans le meilleur de monde.

Puis, j'ai introduit une police non websafe via @font-face : la Franklin Gothic Demi Condensed. Et là catastrophe : tous mes textes se sont retrouvés décalés vers le haut de quelques pixels. Ce n'est pas grand chose mais suffisant pour que mes "beaux" boutons aient l'air tarte et ne soient plus alignés.

En comparant la Franklin à l'Arial, je vois que celles-ci ne sont pas naturellement ajustées de la même manière :
upload/59909-fontface-a.png

Savez-vous comment faire en sorte que me belle Franklin se comporte comme les autres polices type Arial sans devoir tricher sur des padding etc. ?

D'avance mille mercis pour vos lumières Smiley cligne

Bien à vous.
Merci beaucoup Christele pour ta réponse.

En fait ce n'est pas la différence de taille de corps qui pose problème mais plus " l'alignement naturel de la police ".

Je vais illustrer le différence de rendu avec l'Arial, qui est parfaitement aligné, et la Franklin qui semble bien au dessus de la baseline :

upload/59909-alsa2.png

Et je me demande s'il y avait un moyen de corriger cela ?

D'avance merci vos lumières.

Bien à vous
Et les diverses valeurs de la propriété vertical-align, ça ne donne rien ?

https://developer.mozilla.org/fr/docs/Web/CSS/vertical-align.

Sinon, pour rappel, ce qu'on appelle un “caractère” est en fait un rectangle dans lequel est inclus un glyphe (lettre, chiffre, signe de ponctuation, etc.), et apparemment, ta police Franklin Gothic Demi Condensed aurait tout simplement davantage d'espace sous ses glyphes que l'Arial.

Si aucune solution simple ne marche, pourquoi ne pas changer de police plutôt que te lancer dans des bidouillages ?
Un grand merci Raphael et thierry pour vos contributions !

@Raphael : line-height ne donne rien : le décalage vertical est toujours présent.
@Thierry : idem pour le vertical-align. Merci pour le rappel Smiley cligne

Je pensais qu'il existait un moyen en CSS de "redéfinir" la position d'un glyphe au sein de son "rectangle" d'affichage (à priori, non).

Cela m'embête de chercher une autre police car elle fait partie de la charte graphique.

Un solution alternative -un peu folle ?- serait d'éditer la police pour réduire l'espace verticale sous les glyphes de la Franklin Gothic Demi Condensed.

Vous avez déjà fait ça ? Si oui, avec quel outil ? Smiley cligne

Mille mercis !

Bien à vous
dasys a écrit :
Vous avez déjà fait ça ? Si oui, avec quel outil ? Smiley cligne

J'utilise FontCreator, bon rapport performance/prix
C'est pas le même prix!
J'espère que ça en vaut la peine.

Le problème avec les produits chers c'est que leur prix est justifié par des fonctionnalités qu'on ne sait pas utiliser sans un grand investissement en temps et qui sont plutôt perturbantes quand on n'est qu'un utilisateur occasionnel. Je ne compte plus l'argent que j'ai versé au cours des années pour de tels produits que je n'utilise pas.
Bonsoir Dasys,
la solution est peut-être celle-ci (toute simple) car agir sur le padding n'est assurément pas tricher :

upload/59366-magister3.jpg

où les différents <button> reçoivent les styles suivants, en y jouant à la suite sur le padding-top :
<html>
<head>
</head>
<body>

<button type="button" style="display:inline-block;height:22px;font-weight:bold;vertical-align:middle;padding-top:0">MAGISTER</button> 
ou 
<button type="button" style="display:inline-block;height:22px;font-weight:bold;vertical-align:middle;padding-top:5px">MAGISTER</button> 
ou 
<button type="button" style="display:inline-block;height:22px;font-weight:bold;vertical-align:middle;padding-top:10px">MAGISTER</button> 
ou 
<button type="button" style="display:inline-block;height:22px;font-weight:bold;vertical-align:middle;padding-top:15px">MAGISTER</button>

</body>
</html>
Puis il te suffira d'intégrer dans ta déclaration : 
@font-face{font-family:'Franklin Gothic Demi Cond';
/* ... */
/* ... */
button
{font-family:Franklin Gothic Demi Cond;
display:inline-block; /*toutefois, button est nativement en inline-block*/
height:22px; /*déclarer la hauteur permettra ensuite de re-positionner une police rétive*/
vertical-align:middle; /*ou top ou bottom ; c'est judicieux de déclarer un alignement*/
padding-top:3px; /*par exemple 3px repositionne le contenu*/}
}
Documentation sur la balise <button> (balise différente de <input type="button" />) : http://www.w3schools.com/tags/tag_button.asp
Modifié par pictural (27 Sep 2015 - 01:43)
Merci PapyJP pour l'avertissement et merci pour Pictural pour cette réponse hyper complète !
On m'avait dit que la communauté Alsacreations était géniale, je n'imaginais pas que ce serait à ce point Smiley cligne

Ok pour la padding alors si c'est un solution "propre", je vais mettre ça en place de ce pas.

Merci encore !
Modifié par dasys (28 Sep 2015 - 11:08)
Sujet clos
Aller à