28172 sujets

CSS et mise en forme, CSS3

Bonjour,

J'ai un souci, avec Chrome j'ai un bug bizarre, dans mon intégration à certains endroits le texte est tout compressé (voir PJ).

Le bug se fait sur différents éléments tel que des inputs, a ou h2. La propriété css commune à ces éléments est un font-size: 13px;.

Merci de m'éclairer, je sèche Smiley sweatdrop

Bonne journée.

Bug : upload/42133-bug.jpg
Affiche normal : upload/42133-pas-bug.jpg
Bonjour,
ça ressemble fort à un letter-spacing négatif, tu n'as rien de tel dans ton css ?
C'est ce que j'ai pensé aussi, mais non, j'ai même essayé en forçant un letter-spacing positif avec !important (au cas ou), le letter-spacing est bien appliqué mais sur le texte déjà compressé.
Une fonte buguée, peut-être.
Tu utilises une fonte pas disponible en standard sur la plateforme, via @font-face?
Bonjour,

La font c'est du "Myriad Pro", je vais essayer avec une autre font.

Le plus drôle c'est que je n'ai pas le souci en environnement de dev, que en préproduction...
Bon, problème non résolu réellement, "Myriad Pro" n'est pas considéré comme une typographie "Web safe", donc j'ai changé en "Myriad".

Merci
Myriad non plus n'est pas web-safe.
Je pensais que tu chargeais une fonte spécifique avec @font-face. Pour info, si tu veux utiliser Myriad Pro avec @font-face il faudra probablement passer par un service web tel que TypeKit (racheté par Adobe, qui justement édite Myriad Pro).

Autrement:
- Trouver une fonte web-safe relativement proche (pas beaucoup de choix ici, va falloir choisir entre Arial, Verdana, Trebuchet et peut-être Lucida ou Tahoma).
- Utiliser une fonte libre (ou commerciale dont tu aurais acheté les droits) via @font-face, que ce soit Myriad Pro ou une fonte graphiquement proche.