Bonjour à toutes et tous,

J'ai un site qui contient de nombreuses images en SVG. Sur mon Mac et avec Firefox, pas de souci, le rendu est normal. Sur d'autres navigateurs ou chez d'autres utilisateurs, les polices du SVG sautent pour laisser place à une police par défaut, avec un interlettrage fantaisiste. Voici concrètement ce que cela donne:

Rendu correct:

Rendu non conforme:

Je souhaite conserver du SVG pour la qualité de l'affichage et j'ai beaucoup de fichiers sur mon site, raisons pour lesquelles je ne souhaite pas les convertir en PNG ou en JPG, mais tenter de résoudre mon problème avec du CSS qui ciblerait spécifiquement mes images en SVG en leur attribuant la/les polices correctes. 

J'ai testé plein de trucs, mais que dalle, ça marche pas.

Une idée de comment régler ce problème ?

Toute aide plus que bienvenue !

Exemple du problème en live: https://connected.editionslep.ch/bugs-svg/

Un grand merci d'avance 

-
Edité par YanGiroud 1 février 2023 à 10:42:12

C'est un peu confus. Tu parles de polices ou d'images ?

S'il s'agit bien de polices, beaucoup de navigateurs ne gèrent pas tous les formats de polices. C'est pourquoi il te faut ajouter une url de police alternative dans la définition de la règle CSS d'un format plus courant, sachant que les navigateurs vont chercher à afficher les polices dans l'ordre d'apparition dans la règle font-face.

@font-face {
  font-family: "mapolice";
  src: local("Trickster"),
  url("trickster-COLRv1.otf") format("opentype"),
  url("trickster-outline.otf")
      format("opentype"),
  url("trickster-outline.woff") format("woff");
}

Et aussi, dans la propriété font-family, ajouter des polices courantes au cas ou les "spéciales" ne peuvent pas être chargées

monelement {
  font-family: mapolice, verdana,sans-serif;
}

P.S. des sauts de ligne HTML se sont ajoutés que je ne sais enlever.

-
Edité par Domi65 1 février 2023 à 12:10:25

Bonjour Domi65,

J'ai bien pris connaissance de ta réponse. Oui, c'est un peu confus. Pour moi aussi, désolé... 

J'ai testé avec ta proposition, en l'adaptant. Ce qui me donne ça:

@font-face {
  font-family: "PexicoMicro-Regular";
  src: local("PexicoMicro-Regular"),
  url("PexicoMicro-Regular.otf") format("opentype");
}

/* Les éléments <img> dont src finit par ".svg" */
img[src$=".svg"] {
    font-family: PexicoMicro-Regular, neusa neusa-next-std,sans-serif !important;
}

J'ai essayé de le placer sur différentes feuilles de styles, mais ça me marche pas... 

Merci tout de même !

Bonjour.

Et en mettant  neusa neusa-next-std  entre des quotes ? (à moins que ce ne soit deux polices, auquel cas il faut mettre une virgule entre les deux)