Font-face et javascript

Bonjour à toi.

Alors déjà avant de te répondre, tu dois savoir que les gens qui vont visiter tes pages web n'ont pas forcément la police que tu veux utiliser. La preuve tu as dû toi même la télécharger.

Si tu veux vraiment l'utiliser, il faut que tu passes par un script php qui transforme le texte de ta police en image, et qui l'affiche ainsi sans problème. Mais cette technique a quand même quelques limites: elle utilise pas mal de ressources au niveau du serveur web, donc il vaut mieux l'utiliser avec modération (par exemple seulement pour quelques mots ou titres).

L'astuce consiste donc à mettre en place un script php qui d'une part transforme la police en image, et d'autre part sauvegarde l'image dans un dossier. Autrement dit si l'image existe déjà quand le visiteur arrive, bah il affiche l'image, au lieu de mobiliser le serveur. Si elle n'existe pas, on mobilise le serveur pour la créer.

Selon les cas tu peux aussi passer par flash, (après faut gérer les problématiques de référencement tout dépend ce que tu souhaites faire), il y a plusieurs méthodes qui existent.


Maintenant pour répondre à ta question par rapport à javascript. En fait, il faut savoir que ton navigateur affiche du texte selon ses règles et sa DOM à lui. C'est notamment la raison pour laquelle tu peux voir une légère différence d'affichage selon le navigateur utilisé (par exemple sur firefox 3 c'est un poil tantinet plus épais que sur IE 6).

Pour ce qui est de savoir si la police a besoin de javascript pour fonctionner, à priori je dirais non, je n'ai en tout cas jamais entendu parler de ça, mais peut-être que je me trompe donc je ne l'affirmerais pas avec certitude.

Dans ton cas donc il me semble plus approprié de passer soit par les différentes techniques de flash, soit par un script php pour utiliser la police que tu souhaites.

Mais mon conseil personnel serait quand même d'utiliser une police système, dans un soucis d'accessibilité évident.

kurah a écrit :
Alors déjà avant de te répondre, tu dois savoir que les gens qui vont visiter tes pages web n'ont pas forcément la police que tu veux utiliser.

En fait casp parlait de l'utilisation de @font-face (CSS3), si j'ai bien compris.

kurah a écrit :
En fait, il faut savoir que ton navigateur affiche du texte selon ses règles et sa DOM à lui.

À vrai dire le rendu du texte d'un navigateur à l'autre n'a rien à voir avec le DOM.
Le rendu du texte est géré par des librairies soit système (Direct2D/DirectWrite sous Win7 par exemple), soit embarquées dans le navigateur. C'est parfois aussi un astucieux mélange des deux (le navigateur communique avec la librairie système en lui donnant des instructions précises).

kurah a écrit :
Mais mon conseil personnel serait quand même d'utiliser une police système, dans un soucis d'accessibilité évident.

Attention à ne pas parler d'accessibilité pour des problèmes de compatibilité technique. Si ma jolie fonte n'est pas disponible sur le poste de l'utilisateur, et si son navigateur n'implémente pas @font-face, et donc si l'utilisateur se retrouve avec une fonte par défaut à la place de celle que je souhaitais... ça n'est pas un problème d'accessibilité.

Les techniques de génération d'image côté serveur ou de remplacement de texte en Flash (sIFR) ou avec d'autres technologies (Cufon qui utilise Canvas et VML) peuvent, elles, poser de vrais problèmes d'accessibilité. (Ça va dépendre de leur implémentation exacte.)

Bonjour, merci pour ces réponses.
He bien c'est pourtant ce que j'ai fait.
j'ai déclarer avec @font-face la bold et la regular.
(je ne l'utilise effectivement que pour les titres et menu, sinon ca reste de la bonne vieille arial)

Cependant si je n'ai aucun souci avec la regular,
le fait est que les typo bold passe dans leur deuxième police déclaré soit l'arial.

En revanche je n'ai pas déclarer comme toi toute les typo en en Tex gyre Adventor. j'ai suivi les recommandation que j'avais trouvé je ne sais ou, peu être bien sur font squirel. Disant que pour une meilleur compatibilité il fallait déclarer chacune indépendament, soit:

@font-face {
    font-family: 'TeX Gyre Adventor Bold';
    src: url('INC/font/texgyre-bold.eot');
    src: local('?'), 
         url('INC/font/texgyre-bold.woff') format('woff'),
         url('INC/font/texgyre-bold.ttf') format('truetype'),
         url('INC/font/texgyre-bold.svg#texgyre-bold') format('svg');
    font-weight: normal;
    font-style: normal}
@font-face {
    font-family: 'TeX Gyre Adventor';
    src: url('INC/font/texgyre-regular.eot');
    src: local('?'), 
         url('INC/font/texgyre-regular.woff') format('woff'),
         url('INC/font/texgyre-regular.ttf') format('truetype'),
         url('INC/font/texgyre-regular.svg#texgyre-regular') format('svg');
    font-weight: normal;
    font-style: normal}
.typo{
	font-family: 'TeX Gyre Adventor', Arial, Helvetica}
.typobold{
	font-family: 'TeX Gyre Adventor Bold', Arial, Helvetica}

SInon a priori mon javascript n'as rien avoir avec mon css. Donc c'est vraiment étrange...
peu être l'un des script que j'utilise jous un rôle.. mais alors pourquoi uniquement sur la bold.. Vas savoir.
Dans le fond ca me gène pas plus que cela, c'est plus par curiosité que j'aimerai comprendre.

a écrit :
En fait casp parlait de l'utilisation de @font-face (CSS3), si j'ai bien compris.

Autant pour moi je ne connaissais pas cette méthode, je n'ai pas encore appris CSS3, je ne me suis pas vraiment penché sur ce qu'il permet de faire (peu de gens ont des navigateurs compatibles actuellement, du coup j'ai pas encore trop cherché, mais c'est vrai qu'il faut que je m'y mette lol.

a écrit :
À vrai dire le rendu du texte d'un navigateur à l'autre n'a rien à voir avec le DOM.
Le rendu du texte est géré par des librairies soit système (Direct2D/DirectWrite sous Win7 par exemple), soit embarquées dans le navigateur. C'est parfois aussi un astucieux mélange des deux (le navigateur communique avec la librairie système en lui donnant des instructions précises).

Merci pour cette information, je savais que ça venait du navigateur mais je croyais qu'il s'agissait d'une histoire de DOM. Je dormirai moins bête ce soir alors ^^

a écrit :
Les techniques de génération d'image côté serveur ou de remplacement de texte en Flash (sIFR) ou avec d'autres technologies (Cufon qui utilise Canvas et VML) peuvent, elles, poser de vrais problèmes d'accessibilité. (Ça va dépendre de leur implémentation exacte.)

Pour le flash je suis d'accord; mais pour le php je vois pas quel problème d'accessibilité ça pose.

@casp: Pour t'aider plus, il faudrait avoir accès à la page qui pose problème (ou à une page de test qui reproduit le problème).
Une remarque tout de même: pourquoi définir deux noms de police différents ("TeX Gyre Adventor" et "TeX Gyre Adventor Bold") plutôt qu'utiliser uniquement "TeX Gyre Adventor"? Si tu ne vois pas ce que je veux dire, je t'invite à relire mon exemple.

@kurah: pour les solutions de génération d'image en PHP (ou autre langage serveur, ya pas que PHP), il faut voir comment c'est implémenté côté client. À priori il n'y a pas de problème d'accessibilité, mais on a vite fait de faire des bêtises avec des scripts JS mal fichus donc attention aux outils utilisés.

Voila une page test:
http://www.cas-p.net/spip.php?page=TEST2

Si je n'ai pas utilisé ta méthode c'est en raison de cet article:
http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

casp a écrit :
Voila une page test:
http://www.cas-p.net/spip.php?page=TEST2

Sur cette page de test la typo bold passe bien chez moi, sous Linux, avec Firefox 3.6, Chrome 6 et Opera 10.6 (je cite les versions de mémoire, peux me tromper d'un numéro). Dans tous les cas avec JavaScript activé.
Could not reproduce.

casp a écrit :
Si je n'ai pas utilisé ta méthode c'est en raison de cet article:
http://nicewebtype.com/notes/2009/10/30/how-to-use-css-font-face/

Pour préciser un peu: l'article dit que ça pose problème à IE (sans préciser les versions) et à Opera 10 (ma main à couper que c'est corrigé depuis). Il faudra que je teste ça.

A mais moi aussi avec le javascript activé aucun souci
C'est seulement si je le désactive.

Effectivement à tester sur IE il serait bon de savoir quel verison ne fonctionne pas pour cette méthode.. mais bon je suis de nature méfiante avec IE...

casp a écrit :
A mais moi aussi avec le javascript activé aucun souci
C'est seulement si je le désactive.

Hum, j'ai oublié d'écrire que j'avais testé en désactivant JS dans Firefox et que ça marchait toujours aussi bien. D'où le "could not reproduce". Tu désactive JS par quel(s) biais, dans quel(s) navigateur(s)?

Bonjour, alors suite à ta remarque j'ai testé de désactivé le javascript avec webdevelloper et cette fois ci je n'ai pas le souci.

Habituellement je désactive mon javascript avec "noscript"

Bien étrange tout cela. M'enfin bref ne te prend pas la tête dessus, sauf si c'est par curiosité

Mon navigateur (firefox3.6.10 version mac)
Modifié par casp (24 Oct 2010 - 11:44)

Effectivement le plugin noscript bloque les instructions @font-face par défaut. Il faut décocher « Interdire @font-face » dans les options.