1485 sujets

Web Mobile et responsive web design

[Résolu] Affichage de caractères spéciaux sur mobile

Bonjour
J'ai modifié des fichiers de mon site et les ai redirigés vers les mobiles. Tout marche, du moins comme je voulais, sauf un détail très gênant. Il s'agit d'un jeu de cartes et les symboles Cœur et Carreau sont omniprésents. Ils s'affichent correctement en rouge sur mon mobile, de même sur le mobile d'un ami, mais en noir sur le mobile de 2 autres amis.

Pour l'instant, les pages sont codées en ISO 8859-1 et les caractères sont ♥ pour les Cœur et ♦ pour les carreaux. J'ai fait d'autres essais, toujours en ISO 8859-1 avec ≽ pour les Cœurs et $#8830; pour les Carreaux.
Et enfin, essai avec pages codées en UTF-8 avec caractères UNICODE ♥ et &#x2666.

J'ajoute que ces symboles font l'objet de 2 classes nécessaires l'une ck pour adapter la taille des 2 symboles à celle du texte, l'autre KC pour les adapter à la taille des tableaux.
On affiche par exemple <span class = "ck">&hearts;</span> ou
<span class = "KC">&diams;</span> avec les tailles .ck et .KC étant définies dans les styles. Mais je doute que cela ait la moindre incidence.

Le plus gênant est que chaque fois que j'essaye quelque chose, je suis obligé de déranger quelqu'un ayant un mobile. (Si vous voulez m'aider pour le test je vous donnerai l'adresse)
Avez-vous une explication et une solution. Merci d'avance
Unicode sur mobile c'est l'horreur, même pour les caractères sensés être les plus répandus. Moi j'ai arrêté de les utiliser depuis longtemps déjà.

Si vous voulez quelque chose d'uniforme sur tous les supports il faut vous tourner vers des fonts personnalisées que vous préchargerez sur votre serveur ou via un CDN, vous les appellerez ensuite via le css avec @font-face.

Un tutoriel, ancien mais toujours actuel, issu du forum : Comment utiliser une fonte «non-standard» sur un site Web ?
Modifié par Olivier C (23 Apr 2017 - 09:12)
Bonjour
Merci de ta réponse. C'est surement la meilleure piste, mais depuis 2 jours je patine. J'ai trouvé un site ou il y a des symboles Coeur et Carreau mais je n'arrive pas à les exploiter. Voilà mon fichier d'essai pour mettre en oeuvre @font-face :

<!DOCTYPE html>
<html>
<head>
<style> 
@media screen {
@font-face {
    font-family: "Hoyle Playing Cards Normal";
    src: url("/www.dafont.com/fr/hoyle-playing-cards.font;");
}

body{font-family: "Hoyle Playing Cards Normal";}
p{font-size:30px; width:98%}
.texte{color:red}
}
</style>
</head>

<body>
<p>Cela devrait afficher un symbole carreau <span class ="texte">e0101</span> rouge</p>
<p>Cela devrait afficher un symbole coeur <span class ="texte">r0114</span> rouge</p>
</body>

</html>

Malheureusement leur fichier readme de Hoyle est vide et ne donne aucune explication.
A priori, les codes donnés pour Carreau est 0101 (ou e 0101), et celui pour Coeur est r0114, ce n'est pas bien clair. Les symboles sont de format .ttf et les contours True Type.
J'ai installé les polices Hoyle sur mon PC, mais à priori ça n'a rien à voir.
Un conseil supplémentaire me serait précieux. Merci d'avance
Sur ce site tu peux uploader des fichiers svg et générer ensuite une typo :
Fontello

Cela te génère une css à la font awesome. Ensuite tu n'as plus qu'a appliquer des classes css sur une balise pour afficher tes icônes.
Rebonjour
Je pense que je ne suis pas loin de la solution mais il y a encore un truc sans doute tout bête qui m'échappe. Les fonts de coeur et carreau existent déja sur la library icomoon (ou sur awesone). Leur nom est heart et diamonds. Ci joint mon fichier test :

<?php
header('content-type:text/html; charset=iso-8859-1');
?>

<!DOCTYPE html>
<html>
<head>

<style type="text/css">
@font-face {
    font-family: "Ma police";
    src: url("/glyphsearch.com/?library=icomoon");
    <!--src: url("/glyphsearch.com/?library=font-awesome");-->
}

body{font-family:"Ma police"}
p{font-size: 15px; width:98%;}

.icomoon icon-diamonds{font-size:15px}
.icomoon icon-heart{font-size:15px}

</style>
</head>

<body>

<p>carte <i class="icomoon icon-diamonds">diamonds</i>carreau</p>
<p>carte <i class="icomoon icon-heart">heart</i>coeur</p>

</body>
</html>

Ca m'affiche diamonds et heart, mais pas les symboles.
Encore un petit coup de main, SVP. Merci d'avance
Ca m'a pris du temps mais le problème est entièrement résolu et ça marche impeccable. Merci de vos conseils, et mes excuses pour mes scripts précédents pleins d'erreurs. Ca m'a permis de voir la technique de création ou d'importation de fonts et d'icones, mais finalement j'ai opté pour l'utilisation d'images et la maitrise de tous leur paramètres aussi bien pour les textes que les tableaux, en lectire horizontale ou verticale.
Sujet clos
Aller à