1178 sujets

Accessibilité du Web

[Résolu] "Noto sans" et les tofus

Bonjour,

Les tofus sont les carrés blancs affichés par un navigateurs lorsqu'un caractère est manquant sur un système d'exploitation (sur le forum ils s'affichent sous forme de points d'interrogation). Les mobiles sont particulièrement concernés par ce problème.

Afin d'éviter les tofus j'ai opté pour l'utilisation d'une police Google que je pensais être exempte de ce genre de problème car elle vise à l'universalité. Il s'agit de Noto, une police de j'ai découvert ici même il y a quelques temps en lisant les messages d'un membre du forum.

Mais voilà, même en chargeant cette fameuse police sur mon site via @font-face, j'ai toujours ces fameux tofus lorsque je teste sur mon Android (v10). Je ne peu pas vous donner d'exemple car le forum ne les affiche pas de toute façon. Peut-être ai-je mal configuré le chargement de la font ? En effet, celle-ci est composée de plus de 70 familles correspondant aux langues, aux emojis, etc... Mais que choisir au milieu de tout cela ? Ai-je oublié quelque chose d'autre ?

@font-face {
  font-family: 'Noto Serif';
  src: url("/fonts/notoSerif-Regular.woff2") format('woff2'), url("/fonts/notoSerif-Regular.woff") format('woff');
  font-weight: normal;
  font-style: normal;
}

J'ai aussi essayé avec le truetype pour atteindre des médias plus anciens, mais normalement ce n'était pas la peine :
@font-face {
  font-family: 'Noto Serif';
  src: url("/fonts/notoSerif-Regular.woff2") format('woff2'), url("/fonts/notoSerif-Regular.woff") format('woff'), url("/fonts/notoSerif-Regular.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
}

Peut-être que "l'universalité" de cette police se limite à l'affichage correct de toutes les langues (et pas de tout l'Unicode), ce qui ne serait déjà pas si mal... De toute façon, quoi qu'il arrive je la garderais car je la trouve très jolie. Le caractère mentionné je peu allègrement m'en passer, mais je veux bien votre avis pour comprendre.
Modifié par Olivier C (01 Dec 2020 - 15:57)
Modérateur
Bonjour,

Je pense que tu mélanges un peu.

1) Les tofus (rectangle blanc entouré d'une fine bordure)

Un tofu en cuisine japonaise est un petit cube blanc de pâte de soja.

Un tofu est affiché dans un navigateur quand un caractère est manquant dans toutes les police possibless installées sur une machine (et pas seulement "noto" dans ton cas, puisque le navigateur cherche dans d'autres polices quand il ne trouve pas un caractère dans la police spécifiée dans le code de la page). Il faut donc bien insister pour trouver un caractère de ce genre, et au fil du temps, il y en a de moins en moins parce que les polices sont de plus en plus complètes. Mais bon, ça peut encore arriver en 2020.

Parfois, on a un rectangle blanc avec une bordure et contenant un "?", et non pas un rectangle simple. Mais a priori, on n'a pas de "?" simples dans ce cas.

Donne les unicodes d'un de tes exemples (à coup de javascript, tu devrais pouvoir récupérer ça) qui ne marche pas et on pourra faire un diagnostic plus précis.

2) les losanges noirs

Là, en fait, je pense que tu ne confonds pas, mais je précise quand même pour ceux qui vont nous lire. Il s'agit du "caractère de remplacement". Typiquement, on fait par exemple une page php avec un charset en utf-8, et on inclut un fichier qui n'a pas été encodé en utf-8. Le navigateur n'arrive pas à s'en sortir et affiche des caractères de remplacements (les losanges noirs avec un "?") quand vraiment il n'y a rien qui convient (selon les charsets concernés et les situations on peut aussi voir des caractères représentés par d'autres caractères, erronés, et non pas forcément le caractère de remplacement). Or, uft-8 est capable d'afficher à peu près n'importe quel caractère, mais ça ne suffit pas.

3) les "?" tout simples

Là, c'est plutôt un problème lors du transfert des données, où à un moment ou à un autre, un programme dans la chaine de traitement décide que comme il n'arrive pas à s'en sortir (parce que par exemple c'est le bazar dans les encodages), il remplace le code de caractères qu'il ne comprend pas par des "?". Je pense que c'est plutôt ce cas que tu observes sur le forum.

Et dans ce cas, on a dans le code de la page un vrai "?", et c'est "avant" l'affichage par le navigateur que ce "?" s'est retrouvé là : ça n'a rien à voir avec le navigateur ou les polices de caractères.

Test : ? (avant la parenthèse aurait dû s'afficher le caractère 碁).

Amicalement,
Meilleure solution
Merci pour ce petit exposé assez complet. Pour les points d'interrogations j'ai prêté à confusion en mentionnant ce point mais j'avais vu que c'était un traitement des données du textarea côté serveur par le forum, je n'aurais pas dû en parler. Merci en tout cas.
Modérateur
Vraiment Parsimonhi, c'est dingue tout ce que tu peux connaître… C'est super chouette de ta part de partager autant, merci Smiley smile
Modifié par Yordi (01 Dec 2020 - 17:02)
Sujet clos
Aller à