Comments on: Gestion des polices exotiques avec CSS3, jQuery et Cufon

By: aiphes

aiphes — Wed, 24 Feb 2010 11:12:36 +0000

Très bonne solution avec toutefois des remarques et des questions :
- comment faire pour appliquer la même police à des balises différentes ?(2 sortes de div par exemple)
- il apparait que cufon remplace la police sur TOUS les navigateurs, mêmes ceux qui comprennent css3…du coup la css ne sert à rien…à moins que j’ai raté quelquechose…à noté que j’utilise cufon sur drupal via un module dédié…

By: Fili

Fili — Thu, 14 Jan 2010 15:17:35 +0000

Mon problème est réglé. C’était ma version de jquery qui posait problème. dés pour mon post.

By: Fili

Fili — Tue, 12 Jan 2010 22:39:04 +0000

Bonsoir Alexandre,
Merci pour ton tuto. J’avais découvert la version anglaise d’un certain kilian, mais ta version propose qq petites différences.

Néanmoins, en utilisant les 2 méthodes, j’ai tjs le même problème qui commence sérieusement à m’agacer. Peut-être pourra tu m’aiguiller.

J’ai télécharger sur le site fontsquirrel.com la typo Quicksand. Le téléchargement compile automatiquement les fonts aux formats ttf et oet, ainsi qu’un fichier css avec les font-face.
Le problème est le suivant :
Le font-family est “QuicksandLight” et mon src local “Quicksand Light”. Dans le javascriptscript cufon, j’ai indiqué

$(document).ready(function() {
if(!$.fontAvailable(’QuicksandLight’)) {
Cufon.replace(’h1′, { hover: true});
}
});

J’ai essayé le même script avec “Quicksand Light” et “Quicksand”, mais malheureusement, mon script cufon ne marche pas. FF 3.5 affiche bien la typo en css, mais d’autres navigateurs (chrome) n’affichent pas la typo cufon sous forme d’images

Est-ce que tu as une idée d’où provient le problème.

Merci

By: Fili

Fili — Tue, 12 Jan 2010 22:19:10 +0000

@laurent et @benoit
dans le générateur du site cufon, il suffit de cliquer la case “Latin-1 Supplement” pour obtenir les accents!!!

By: Gestion des polices exotiques | Codes ès croqués

Gestion des polices exotiques | Codes ès croqués — Sun, 13 Dec 2009 19:28:56 +0000

[...] Ce billet a relancé mon intérêt pour la gestion des polices en CSS. Jusqu’à présent, @font-face était tombé aux oubliettes car abandonné dans les implémentations de CSS 2.1. Mais la course au navigateur fait qu’aujourd’hui, font-face est géré par les dernières versions de quasiment tous les navigateurs du marché (IE, Firefox, Chrome, Opera). Rappelons que font-face déclare par la feuille de style des nouvelles polices à votre navigateur, qui s’empresse de les télécharger s’il ne les a pas. [...]

By: severine

severine — Sat, 14 Nov 2009 04:27:36 +0000

oups pardon pour cette partie.. j’avais fait des tests mais j’ai rectifié et ca ne change rien

Cufon.replace(’#article h3′);

By: severine

severine — Sat, 14 Nov 2009 04:25:25 +0000

Bonjour Alexandre, merci pour ta réponse mais ca ne marche tjrs pas. je pense que je ne sais pas appeler le #article h3 dans le div…

voici le code de la css :
@font-face { font-family : ‘littleD’;
src: url(’img/littleD.ttf’) format(’truetype’); }

#article h3 { font-family: “littleD”, arial, sans-serif;

Et le code de la page test.htm :

Polices

$(document).ready(function() {
if(!$.fontAvailable(’littleD’)) {
Cufon.replace(’article’);
}
});

test

dois-je mettre un “style” à la place du “class” ? en tout cas RIEN ne se passe…

merci

By: Cufón : des polices de caractère pour tous » Javascript & Web Design - Tous les jours le meilleur des ressources Javascript pour webdesigners

Fri, 13 Nov 2009 16:02:12 +0000

[...] Gestion des polices exotiques avec CSS3, jQuery et Cufon [...]

By: Alexandre

Alexandre — Fri, 13 Nov 2009 09:58:35 +0000

Bonjour Séverine,

Je ne sais pas si tu m’as copier/coller directement le code que tu as appliqué mais si c’est le cas, il faut remplacer les “Ma police exotique” par le nom de ta police (littleD)

Après si ce n’est vraiment pas le cas, tu peux toujours regarder avec firebug (ou l’outil de dev de safari) si le fichier se charge correctement et plus largement ce qu’il se passe sur ta page

By: severine

severine — Fri, 13 Nov 2009 09:43:05 +0000

Bonjour
au risque de passer pour une idiote… ca ne marche pas du tout sur firefox… ni IE chez moi : je crois avoir bien suivi les instructions, voici le code de ma page test :

Polices

$(document).ready(function() {
if(!$.fontAvailable(’Ma police exotique’)) {
Cufon.replace(’#article h3′);
}
});

test

Qu’est-ce que je mets au mauvais endroit ??
a priori j’ai placé les fichiers correpondants là ou il fallait mais ca ne marche pas… ma police est dans img et voici le code de la page css :

@font-face { font-family : ‘Ma police exotique’;
src: url(’img/littleD.ttf’) format(’truetype’); }

#article h3 { font-family: “Ma police exotique”, arial, sans-serif; }

bonne journée et merci…