{"id":759,"date":"2009-09-29T00:12:15","date_gmt":"2009-09-28T22:12:15","guid":{"rendered":"http:\/\/v6.capsule.org\/blog\/?p=759"},"modified":"2010-10-06T11:00:27","modified_gmt":"2010-10-06T09:00:27","slug":"remplacement-dynamique-de-fonts-cufon-versus-typeface-js","status":"publish","type":"post","link":"https:\/\/capsule.org\/blog\/remplacement-dynamique-de-fonts-cufon-versus-typeface-js\/","title":{"rendered":"Remplacement dynamique de fonts – Cuf\u00f3n versus Typeface.js"},"content":{"rendered":"

\u00c0 ma droite, Cuf\u00f3n<\/a>. \u00c0 ma gauche, Typeface.js<\/a>. Lequel choisir ?<\/p>\n

J’avais une petite pr\u00e9f\u00e9rence pour Typeface.js, je ne sais pas exactement pourquoi, peut-\u00eatre parce que je l’avais d\u00e9couvert avant Cufon (oui je sais il manque l’accent !).<\/p>\n

Typeface.js est rapide, tr\u00e8s rapide, surtout sous IE. C’est son gros avantage. Il est aussi plus simple \u00e0 impl\u00e9menter car il s’applique automatiquement aux H1 \u00e0 H6 et aux \u00e9l\u00e9ments dont la classe est “typeface-js”. Le reste se passe via la feuille de style.<\/p>\n

Jusque l\u00e0, vous allez me dire: vive Typeface.js !<\/p>\n

Oui mais, car il y a un mais…<\/p>\n

La conversion des polices via l’outil de Typeface.js n’est pas simple et il faut parfois avoir recours \u00e0 fontforge pour d\u00e9sactiver certains options d’embedding “OS2” (???). Et surtout, le script \u00e9choue lamentablement s’il est appel\u00e9 depuis une page imbriqu\u00e9e via une iframe g\u00e9n\u00e9r\u00e9e par un overlayer style lightwindow, fancybox et consor. browserStyle is not defined? Il semble se perdre dans les m\u00e9andres du DOM…<\/p>\n

De l’autre c\u00f4t\u00e9, l’outil de conversion de Cufon est une merveille, il accepte la plupart des polices sans broncher et permet de limiter leur usage \u00e0 un ou plusieurs domaines. Il propose m\u00eame des options obscures que les typo-puristes reconnaitront s\u00fbrement. Moi je me suis content\u00e9 de la valeur par d\u00e9faut. Un pi\u00e8ge \u00e0 \u00e9viter toutefois : ne sp\u00e9cifiez pas de font-family sous peine de voir ensuite le moteur de rendu s’emm\u00e9ler les pinceaux entre les diff\u00e9rentes graisses.<\/p>\n

Et \u00e7a fonctionne m\u00eame dans les iframes sus-nomm\u00e9es. Que demande le peuple !<\/p>\n

Une int\u00e9gration automatique? Il faut en effet “appliquer” Cufon sur les \u00e9l\u00e9ments voulus \u00e0 la main. Cela permet notamment de forcer une police sur un \u00e9l\u00e9ment dont la d\u00e9claration font-family ne correspondrait pas dans la CSS, ce qui n’est pas forc\u00e9ment la meilleure id\u00e9e. Heureusement, ce dernier reconnait les s\u00e9lecteurs jQuery pour notre plus grand bonheur – veillez juste \u00e0 charger jQuery avant<\/strong> Cufon pour qu’il reconnaisse ceux-ci ;-)<\/p>\n

Update 29\/09\/2009<\/strong>: En fait la d\u00e9tection automatique du font-family est \u00e9galement disponible dans Cufon mais d\u00e9sactiv\u00e9e par d\u00e9faut pour contourner un bug dans Opera. Voir les Options<\/a> de l’API.<\/p>\n

Update 06\/10\/2010<\/strong>: J’entends souvent dire que le texte n’est pas s\u00e9lectionnable dans Cufon, c’est FAUX. On ne voit en effet pas la s\u00e9lection dans tous les browsers, mais elle est toutefois effective !<\/p>\n","protected":false},"excerpt":{"rendered":"

\u00c0 ma droite, Cuf\u00f3n. \u00c0 ma gauche, Typeface.js. Lequel choisir ? J’avais une petite pr\u00e9f\u00e9rence pour Typeface.js, je ne sais pas exactement pourquoi, peut-\u00eatre parce que je l’avais d\u00e9couvert avant Cufon (oui je sais il manque l’accent !). Typeface.js est rapide, tr\u00e8s rapide, surtout sous IE. C’est son gros avantage. Il est aussi plus simple \u00e0 … →<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0},"categories":[5,9],"tags":[],"_links":{"self":[{"href":"https:\/\/capsule.org\/blog\/wp-json\/wp\/v2\/posts\/759"}],"collection":[{"href":"https:\/\/capsule.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/capsule.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/capsule.org\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/capsule.org\/blog\/wp-json\/wp\/v2\/comments?post=759"}],"version-history":[{"count":6,"href":"https:\/\/capsule.org\/blog\/wp-json\/wp\/v2\/posts\/759\/revisions"}],"predecessor-version":[{"id":761,"href":"https:\/\/capsule.org\/blog\/wp-json\/wp\/v2\/posts\/759\/revisions\/761"}],"wp:attachment":[{"href":"https:\/\/capsule.org\/blog\/wp-json\/wp\/v2\/media?parent=759"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/capsule.org\/blog\/wp-json\/wp\/v2\/categories?post=759"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/capsule.org\/blog\/wp-json\/wp\/v2\/tags?post=759"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}