Salut à toutes et à tous,

Je m'occupe actuellement de la construction de ce site:
www.lebiscornu.fr

Je me retrouve avec 2 soucis que je ne sais pas régler, tout se passe dans le header:

- "le biscornu" est en image, il reprend la police "Sex_pistols" (que l'on trouve sur dafont) en l'exploitant avec une graisse standard. Pour "bistrot" et "resto", j'ai voulu tester la propriété font-face. Les 3 éléments sont placés grâce a des span déclarées dans mon CSS.
Le problème ==> Au chargement de la page index / lors d'un changement de page, "biscornu" saute légèrement vers la droite pour se recaler au centre. Je sais pas si c'est clair, le fait d'aller voir le site sera plus explicite

- L'image "le biscornu" est là car la solution 100% font-face ne me plait pas aussi à cause d'une chose que je ne sais résoudre: la police s'affiche comme si elle était en bold, alors que je ne l'ai pas déclaré telle qu'elle et la voudrait en regular, comme le logo (on voit la différence avec l'intérieur des "e" par exemple).


Mes réflexions pour le 1er problème:
- Est ce ma solution "span" qui peut foutre la merde ? je ne vois pas comment
- Est-ce les éléments invisibles de weebly (la plateforme que j'utilise pour ne pas avoir à m'occuper du back office), qui propose par exemple l'intégration d'un logo en header, que j'ai mis en off mai sil reste peut être un espace qui traine ? je ne pense pas non plus
- Est-ce que ça ne viendrait pas du fait que l'image "le biscornu" semble se charger avant les éléments en police et que ces derniers modifient un chouilla le centrage quand ils arrivent ?
==> Si pas de solutions (même si ça me semble un truc tout con mais qu'il faut être éveillé pour le voir, pas comme moi !), je ferai tout en image mais bon ...

Mes réflexions sur le second problème:
- J'ai essayé de qualifier font-weight avec une valeur minimale ça ne change rien
- est ce que c'est mon letter-space ? Je ne pense pas.
- J'ai regardé si un parent n'avait pas un bold, je suis tellement crevé là que j'ai pu en oublier un mais il ne me semble pas, le code n'est pas si long ! ;-)
- J'ai peu de pistes sur ce soucis ...


Je passe à autre chose en attendant vos réponses, merci d'avance pour votre aide ! ;-)

Je me réponds à moi même, en espérant que ce post soit référencé et qu'il puisse servir à d'autres:

Le @font-face, ça fonctionne, c'est au point, mais ça reste risqué en intégration:
- Les navigateurs ne gèrent pas tous les polices de manières exactement égales, firefox me "l'enrobait" un poil, la rendant grasse
- Au final fait pour être plus léger, il semble que le processus d'affichage soit plus lourd, dans mon cas, que de bêtes PNG qui pesaient 3ko chacun. J'avais donc l'image du centre (le biscornu) qui s'affichait en premier, puis les polices qui arrivait (bistrot et resto). Sous chrome par exemple, la page entière est rechargée, mais pas sous Firefox où du coup mon système de span pour caler les éléments (qui ne sont donc pas en positionnement absolu par exemple) montrait un petit décalage, le logo (le biscornu) image se calait, puis se recalait un poil sur la droite quand les polices était enfin chargées ...

J'utilise toujours le @font-face pour mes polices de contenu, c'est définitivement l'usage à lui conserver, tout ce qui peut rester en image / qui n'est pas dynamique / qui n'est pas amené à changer souvent = images ...

++
BAB's