Bonjour à tous,

Pour afficher différents symboles que l'on trouve dans cette police de caractères, j'ai mis dans le fichier css correspondant:

font-family: wingdings;

et j'obtiens toujours l'affichage avec la police définie au niveau body.

Est-ce lié à une écriture incorrecte, au fait que cette police n'existe pas par défaut dans Windows ou dans Firefox ou à autre chose?

Merci d'avance si vous pouvez m'aider à corriger le tir!

Hello,

Cette police n'est apparemment pas prise par défaut par les navigateurs les plus courant. Mais si tu veux vraiment mettre cette police, une partie du cour sur le CSS y est dédié ici.

Il suffit de télécharger la police et de l'insérer dans le fichier.

En espérant que cela te soit utile.

Merci pour ta réponse

Elle me laisse malheureusement un peu sur ma faim! En effet je cherche à réécrire (en javascript ...) un jeu que j'avais écrit il y a longtemps en Flash. Et avec Flash, ces caractères s'affichaient sans avoir à faire charger par les visiteurs de lourds fichiers de police.

Et les grilles de mon jeu affichent plus d'une centaine de symboles ...

D'autres pistes?

Salut,

C'est la seule façon de charger une font. C'est ça, ou bien faire un gros sprite SVG de toutes tes icones.

-
Edité par EmmanuelBeziat 22 octobre 2017 à 13:04:58

Merci rhooManu.

Pour être plus précis, j'utilise 62 symboles (correspondant aux caractères a-z, A-Z et 0-9) qui s'affichent avec des colorations variées.
Mon objectif "accessible aux téléphones", qui est encore loin d'être gagné, me conduit (à tort ou à raison) à chercher à économiser le plus de poids possible.

Quand tu évoques "un gros sprite SVG", ça m'intéresse si ça peut aboutir à gagner quelque chose sachant que je n'ai aucune idée de ce que tu évoques. D'où 2 questions complémentaires:

1) Le gain potentiel est-il substantiel ou marginal?

2) Où puis-je trouver doc ou tuto solide et ... si possible en français sur ce sujet?
(J'ai vu 2 ou 3 trucs qui ont l'air intéressants comme la-cascade, curseur-et-bergamote et ... Openclassrooms. Une recommandation?)

Franchement, charger une font ne posera aucun souci sur téléphone, ne te restreint pas pour ça.

C’est bien de chercher à optimiser, mais ne te prends pas la tête pour le moindre octet, ça ne fera pas de différence. Et par rapport à ce que je te disais, l’un dans l’autre, une font n’est qu’un gros sprite SVG aussi (grosso modo).

Doc solide, je ne sais pas trop… Vois le MDN, mais même là je préfère me référer à la version anglaise.

Pour t’expliquer grosso modo le principe des sprites, voici : https://www.emmanuelbeziat.com/blog/bien-utiliser-les-sprites-css Mais note bien que ça date d’une époque où le SVG n’était pas pris en charge comme format d’images, la technique est un peu différente aujourd'hui. Le principe reste le même, à part que ça ne se passe plus dans le CSS : https://css-tricks.com/svg-sprites-use-better-icon-fonts/ 

-
Edité par EmmanuelBeziat 24 octobre 2017 à 8:03:17

Merci rhooManu.

Je vais donc explorer tes liens et en attendant je pensais arriver à mes fins en utilisant la police wingding.tff trouvée dans le répertoire Windows/Fonts .

Après avoir recopié ce fichier dans le répertoire du fichier CSS, j'ai modifié ce dernier comme suit:

@font-face {
    font-family: 'wingding';
    src: url('wingding.ttf' format('truetype'));
}
#grilleJeu {
    position: absolute;
    border: 1px solid #888;
    background-color: #f555;
    font-family: wingding;
    font-size: 40px;
    width: 620px;
    height: 525px;
    top: 70px;
    left: 150px;
}

Mais ... j'obtiens toujours un affichage en caractères normaux (ceux déclarés dans le body).

Pourtant si je mets le font-family à "Impact" par exemple, le changement s'opère bien.

Serait-ce lié au format truetype et à la façon dont j'ai écrit l'instruction font-face?

-
Edité par chedev 24 octobre 2017 à 18:40:50

Je réactive ce topic car je viens de découvrir que la police wingdings était payante!

Pourtant cela fait des années que je l'utilise gratuitement dans mes programmes Flash. Elle est en effet incorporée à Flash.

Le site fontsquirrel annonce que son utilisation coûte "à partir de 29 euros". En fait 29 euros ça semble être pour une utilisation sur son PC. Pour le mettre sur un serveur, ce serait 290 (par an?).

Je suis un modeste amateur, j'ai un site de jeux gratuit et garanti sans pub. Sans parler du temps que j'y passe, je paye déjà un hébergeur et des noms de domaine. Je ne vais pas payer en plus pour une police qui est déjà incorporée à Flash (et d'ailleurs également au Windows que j'utilise).

Le fichier .ttf présent dans Windows doit être bridé puisque je n'arrive pas à le faire reconnaitre sur mon site.

Avez-vous des informations ou des idées sur des façons de s'en sortir ... sans frais ?

Merci d'avance.

Bonjour,

tu peux chercher des alternatives aux symboles que tu utilises sur https://icomoon.io, qui te permet de piocher dans plusieurs polices d'icônes (toutes ne sont pas gratuites, certaines le sont) et générera pour toi les fichiers de police correspondants.