Bonjour,

J'ai un étrange bug que je ne parviens pas à corriger. Dans l'un de mes titre h2, j'ai deux lettre "O" et "ù" qui sont très (trop) éloignées l'une de l'autre. Je suspectais dans un premier temps l'accent sur le "u" mais comme vous pouvez le voir, j'ai d'autres "u" accentués qui ne présentent pas le même problème.

Je vous mets un screenshot :

Une petite idée d'où le problème pourrait venir?

Salut,

très joli effectivement.

Et sans le text-align: justify ça donne quoi ?

As-tu essayé en mettant le o minuscule juste pour voir ?

-
Edité par Frogweb 20 mai 2019 à 15:46:12

@Frogweb: Sans le"text-align: justify", ça ne change rien. En revanche, j'ai testé sans le "font-family: Agenda, Arial, sans-serif;" et je n'ai plus l'espacement qui me gène.

Je mets ci-dessous le CSS concernant la police d'écriture:

/*****************
*Police d'ecriture
******************/
@font-face {
    font-family: 'agendaregular';
    src: url('ufonts.com_agenda-light-webfont.eot');
    src: url('ufonts.com_agenda-light-webfont.eot?#iefix') format('embedded-opentype'),
         url('ufonts.com_agenda-light-webfont.woff2') format('woff2'),
         url('ufonts.com_agenda-light-webfont.woff') format('woff'),
         url('ufonts.com_agenda-light-webfont.ttf') format('truetype'),
         url('ufonts.com_agenda-light-webfont.svg#agendaregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

Je ne maîtrise pas très bien cette partie. L'erreur s'y cache peut-être!

Ce code est normal.

Peut-être qu'un des fichiers est mauvais.

Mets tout ce code en commentaire et mets celui-ci :

@font-face {
    font-family: 'agendaregular';
    src: url('ufonts.com_agenda-light-webfont.eot');
    src: url('ufonts.com_agenda-light-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

ça réduira les pistes.
Si tu as toujours le bug essaies en remplaçant les deux woff par woff2.

Tu tes avec quel navigateur ?

J'ai toujours le bug avec woff et woff2. Je suis sous Firefox 66.0.5 (64 bits).

J'ai testé :

- avec Chrome -> même problème

- avec Safari -> J'ai une police d'écriture différente et l'espacement à disparu!!

... le problème disparaît également si je remplace le "o" majuscule par minuscule.

-
Edité par @rtur 20 mai 2019 à 16:23:00

Alors il est possible qu'un de tes fichiers soit corrompu. Télécharge-les de nouveau, ça réglera peut-être le problème.
Sinon c'est carrément la font qui ne se comporte pas comme il faut. ça serait quand même étonnant qu'une font ne gére pas le cas d'une majuscule suivi d'une lettre accentué...
En dehors de maj/min, tu as essayé plusieurs cas de figures ?
Comme mettre une autre lettre à la place du O ou une autre lettre à la place du ù.

Une solution au pire, trouver une autre font qui s'en approche.

N'oublie pas d'enlever le code que je t'ai fourni et de remettre le tien.

Bon après quelques tests infructueux, je me suis penché sur cet article très bien fait et je me suis rendu compte que:

- "font-family" doit indiquer le nom de la police tel qu'utilisé dans le reste de la feuille CSS. J'ai donc remplacé "agendaregular" par "Agenda"

- Le paramètre de la fonction url() doit indiquer le path vers la police d'écriture (oui je sais ça paraît évident quand on le dit comme ça). Pour ma part, j'avais mis les différentes polices d'écriture dans un dossier "font". J'ai donc corrigé le path en conséquence.

Avec ces correctifs, la police d'écriture est semblable quelque soit le navigateur et je n'ai plus le problème de l'espacement entre le "O" et le "ù".

Morale de l'histoire: ne pas recopier bêtement un code généré sous prétexte de suivre un tuto à la lettre.