28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous Smiley cligne

Je suis tombé par hasard sur ce site, http://buildconf.com/, qui utilise 2 polices qui s'appellent "ff-tisa-web-pro-1 et ff-tisa-web-pro-2" .

J'ai essayé d'étudier comment ce site affichait ces polices, mais je n'arrive pas à trouver.

J'ai pensé qu'il s'agissait d'HTML5 et de CSS3, j'ai donc cherché la propriété font-face, mais elle semble inexistante sur ce site.

Alors comment fait-il ?

Merci d'avance de votre avis Smiley lol
Bonjour,

Le site utilise un script du genre de cufon (flemme de fouiller leurs JS) qui génère à la volée le texte dans la police souhaité avec l'aide de Flash (normalement).

L'utilisation de @font-face reste quand même plus simple, légère et efficace (ça fonctionne même avec IE6 Smiley langue )
marc.suisse a écrit :
Bonjour à tous Smiley cligne
Je suis tombé par hasard sur ce site, http://buildconf.com/, qui utilise 2 polices qui s'appellent "ff-tisa-web-pro-1 et ff-tisa-web-pro-2" .
J'ai essayé d'étudier comment ce site affichait ces polices, mais je n'arrive pas à trouver.
J'ai pensé qu'il s'agissait d'HTML5 et de CSS3, j'ai donc cherché la propriété font-face, mais elle semble inexistante sur ce site.
Alors comment fait-il ?
Merci d'avance de votre avis Smiley lol


Si tu veux plus d'infos sur CUFON : CUFON sur AlsacréationS
Salut,
Laurie-Anne a écrit :
Le site utilise un script du genre de cufon
Non, c'est du @font-face avec Typekit. Voir tout en bas de leur code html :
<script type="text/javascript" src="http://use.typekit.com/zrf6wxa.js"></script>
<script type="text/javascript">try{Typekit.load();}catch(e){}</script>

EDIT
Pour une présentation en détails de cette méthode : http://all-for-design.com/typographie/typekit
Modifié par marcv (17 Jul 2010 - 10:09)
Bonjour à tous Smiley cligne

Je comprends qu'en utilisant typekit, on créé une sécurité concernant les droits d'auteur des polices en empêchant les internautes de télécharger la dite police.

Par contre, supposons que l'on utilise une police libre provenant de chez Dafont par exemple, il suffit donc dans ce cas là d'utiliser font-face directement dans le CSS ?

Concernant cufon, il faut bien comprendre que c'était une alternative afin de pouvoir utiliser des polices non standards sur des "anciens navigateurs", mais maintenant avec l'arrivée de font-face, tous ces moyens deviennent gentiment caduc au fur à mesure que le "parc" des navigateurs se mettent à jour.

Ou pas forcément ?

Merci encore Smiley biggrin
@marc.suisse oui tout à fait. D'ailleurs, une fois que tu auras trouvé une police (dont la licence autorise son utilisation via @font-face) je ne pourrais que te conseiller d'utiliser l'excellent outil gratuit sur FontSquirrel : @Fontface generator qui te machera le travail et te facilitera grandement la tâche (code html/, fichiers TT, OT, EOT etc.)
Salut,

Merci de cette précision Smiley cligne

J'ai été voir ton site, j'aime beaucoup, superbe !

Comment trouves-tu l'inspiration ?

Bon dimanche !
Merci,

en fait, l'inspiration je la trouve au jour le jour, au fil de mes lectures (livres, magazines, articles sur le web), de mes rencontres, de mes nombreuses ballades sur le web de lien en lien, parfois je la trouve aussi simplement en me baladant dehors à la vue de certains détails dans une vitrine, une couleur particulière sur une affiche, une typo judicieusement choisie sur un autocollant moitié arraché sur un panneau de signalisation, sur le TShirt d'un passant qui va attirer mon attention etc.. Bref, l'inspiration pour moi c'est tout le temps et partout Smiley smile

Il faudrait peut-être aussi te préciser que c'est mon métier, je suis web designer, donc il serait assez triste de prétendre concevoir des interfaces web sans avoir pris le temps de concevoir correctement son propre site n'est-ce pas ? Smiley smile

Merci pour le compliment en tous cas, ça fait toujours plaisir.

Bon courage pour ton travail typographique.
Modifié par Aure (18 Jul 2010 - 11:26)