2
votes

Espace vide en bas du texte lors de l'utilisation de la famille de polices

Je rencontre un problème lorsque j'applique la famille de polices pour mon composant Texte comme image ci-dessous

Comme vous pouvez voir, mon texte ne peut pas s'aligner au centre lui-même (la zone rouge est mon composant Texte par défaut, sans aucune marge ni remplissage).

Je pense que ce problème vient de ma police ( TradeGothicLTStd-BdCn2 ) car lorsque je change de police, je ne vois plus ce problème.

Voici mon style pour ce composant

 dropdownCurrentText: {
    fontFamily: Fonts.type.TradeGothicLTStdBold,
    fontSize: 14,
    justifyContent: 'center',
    textAlign: 'center',
    color: Colors.black,
    letterSpacing: 0.2
  },

ios react-native css fonts

3 commentaires

Avez-vous regardé cet accessoire: includeFontPadding . Le définir sur false peut fonctionner pour vous. Bien que cela ne fonctionne que sur Android

Avez-vous déjà essayé de jouer avec la hauteur de ligne?

@ 04FS merci, j'ai essayé, mais sans espoir

3 Réponses :

0
votes

Vous pouvez essayer d'ajouter cette propriété à un élément particulier: vertical-align: middle

0 commentaires

1
votes

Si vous ne voulez pas jouer avec les valeurs de marge / remplissage, vous pouvez définir la zone de texte comme un élément de bloc en ligne, lui donner une position relative et ajuster la (les) valeur (s) haut / bas en fonction du centre comme vous le souhaitez:

<div>
  <span>SELECT</span>
</div>

div {
  align-items: center;
  border: 1px solid gray;
  display: flex;
  height: 40px;
  width: 200px;
}

span {
  background: red;
  display: inline-block;
  position: relative;
  top: 2px;
  left: 10px;
}

1 commentaires

merci pour votre réponse, je vais l'essayer et revenir plus tard

2
votes

Enfin, je trouve la solution à mon problème, merci pour une autre réponse.

Qui utilise Font Tool for XCode, vous pouvez lire cet article pour plus de détails https://medium.com/@martin_adamko/consistent-font-line-height-rendering-42068cc2957d

1 commentaires

Merci beaucoup !!! Je me demande depuis des mois pourquoi mon texte a plus d'espace et ces réponses résolvent mon problème !!