cuf\u00f3n<\/code>. Pour faire simple, il s\u2019agit d\u2019un script JavaScript qui permet \u00e0 la vol\u00e9e la conversion des \u00e9l\u00e9ments textes de votre page.<\/p>\nLa liste des balises est celle de pratiquement de toutes les balises html : <h1>...<\/h1><\/code>, <h2>...<\/h2><\/code>, <h3>...<\/h3><\/code>, <a>...<\/a><\/code>, <p>...<\/p><\/code>…<\/b> <\/p>\nD’autres essais avaient \u00e9t\u00e9 tent\u00e9, via un javascript notamment, un peu sur le m\u00eame mod\u00e8le que cuf\u00f3n<\/code> avec typeface.js<\/code><\/b><\/p>\n\n- Mike Davidson – sIFR – http:\/\/www.mikeindustries.com\/blog\/sifr\/<\/a>
Voir les essais assez convaincants http:\/\/www.mikeindustries.com\/blog\/wp-content\/uploads\/sifr\/2.0\/<\/a><\/li>\n- sIFR Lite! – http:\/\/www.allcrunchy.com\/Web_Stuff\/sIFR_lite\/<\/a>
Une version de la m\u00e9thode pr\u00e9c\u00e9dente plus “object-oriented” dans son fonctionnement et son appel.<\/li>\n- Facelift Image Replacement – http:\/\/facelift.mawhorter.net\/examples\/<\/a>
Le remplacement des textes par des images avec une combinaison de php et javascript.<\/li>\n- typeface.js — Rendering text with Javascript, <canvas>, and VML – http:\/\/typeface.neocracy.org\/<\/a><\/li>\n<\/ul>\n
Source : http:\/\/www.alsacreations.com\/actu\/lire\/636-cufon-nouvelle-alternative-pour-intgrer-des-polices-truetype-et-opentype-au-web.html<\/a> <\/em><\/p>\nAinsi font font…<\/h4>\n
On va essayer juste \u00e0 titre d’essai avec une police qui est mis \u00e0 disposition sur site de cuf\u00f3n<\/code>. Cette police se nomme Vegur<\/code>. On passe outre le processus de conversion du fichier .ttf<\/code> au format .font.js<\/code>, par lequel on obtient un fichier .font.js<\/code>, en l’occurrence Vegur.font.js<\/code>. Cette conversion, on y revient en toute fin d’article.<\/p>\nLe fichier de la police Vegur<\/code> convertie en javascript<\/b>
\n
\n\t\/*!
\n\t * Copyright (C) 2004-2008 dot colon. All rights reserved.
\n\t *\/
\n\tCufon.registerFont({\"w\":209,\"face\":{\"font-family\":\"Vegur\",\"font-weight\":200,\"font-stretch\":\"normal\",\"units-per-em\":\"360\",\"panose-1\":\"0 0 0 0 0 0 0 0 0 0\",\"ascent\":\"270\",\"descent\":\"-90\",\"x-height\":\"4\",\"bbox\":\"-11 -274 322 94\",\"underline-thickness\":\"18\",\"underline-position\":\"-36\",\"unicode-range\":\"U+0020-U+00F3\"},
\n\t<\/p>\n<\/code><\/p>\n
Le fichier de la police Vegur<\/code> que nous avons renomm\u00e9 Ma_police_de_site<\/code> (Ma_police_de_site.font.js)<\/b>
\n
\n\t\/*!
\n\t * Copyright (C) 2004-2008 dot colon. All rights reserved.
\n\t *\/
\n\tCufon.registerFont({\"w\":209,\"face\":{\"font-family\":\"Ma_police_de_site\",\"font-weight\":200,\"font-stretch\":\"normal\",\"units-per-em\":\"360\",\"panose-1\":\"0 0 0 0 0 0 0 0 0 0\",\"ascent\":\"270\",\"descent\":\"-90\",\"x-height\":\"4\",\"bbox\":\"-11 -274 322 94\",\"underline-thickness\":\"18\",\"underline-position\":\"-36\",\"unicode-range\":\"U+0020-U+00F3\"},
\n\t
\n<\/code><\/p>\nSource : http:\/\/github.com\/sorccu\/cufon\/blob\/master\/fonts\/Vegur.font.js<\/em><\/p>\nCharger cuf\u00f3n<\/code> \u00e0 l’aide de mootools<\/code><\/h4>\nUn vue rapide de l’arborescence de fichiers et de r\u00e9pertoires n\u00e9cessaires au fonctionnement de l’ensemble. Le style de l’ensemble figure classiquement dans un fichier .css<\/code>. Un grand merci \u00e0 Ben, pour la mise \u00e0 disposition des fichiers et de ses explications.<\/strong><\/p>\n![\"Webdesign,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2009\/10\/font_with_cufont_1.jpg\")
<\/p>\n
D\u00e9tails du r\u00e9pertoire js<\/code><\/b><\/p>\n\n- cufon-yui.js<\/li>\n
\tL’indispensable<\/p>\n
- mootools-1.2-full.js<\/li>\n
\tLe n\u00e9cessaire, le framework Mootools<\/p>\n
- functions.js<\/li>\n
\tL’accessoire\n<\/ul>\n
Le code source functions.js<\/code><\/b><\/p>\n\nvar txt2img = {\n\tinit: function(){\n\t\t\n\t\tif(!$('page')) {\n\t\t\tlog.console('init stopped !');\n\t\t\treturn false;\n\t\t}\n\t\t\n\t\t$('page').getElements('.txt2img').each(function(L, I){\n\t\t\t\/\/ Cufon.replace(L, { fontFamily: 'Vegur' });\n\t\t\tCufon.replace(L, { fontFamily: 'Ma_police_de_site' });\n\t\t\t\n\t\t});\n\t\t\n\t}\n};\nwindow.addEvent('domready', function() {\n\ttxt2img.init();\n});\n<\/pre>\nLe code source du fichier load_cufon.php<\/code><\/b>
\nL’ensemble des fichiers est appel\u00e9 dans le fichier load_cufon.php<\/code><\/p>\n\n\t<?php\n\t\/** timer start **\/\n\t$timer['start'] = microtime(true);\n\n\t\/** auto detect paths **\/\n\t$self = pathinfo(__FILE__);\n\tdefine('BASEPATH', rtrim($self['dirname'], '\/') . '\/');\n\tdefine('BASEURL', 'http:\/\/' . rtrim($_SERVER['HTTP_HOST'], '\/') . '\/' . str_replace(rtrim($_SERVER['DOCUMENT_ROOT'], '\/') . '\/', '', rtrim($self['dirname'], '\/') . '\/'));\n\n\t\/** config **\/\n\tdefine('_CSS', BASEURL . 'css\/styles.css');\n\n\t\/* FONTS *\/\n\t\/\/ define('_CUFON_FONT_1', BASEURL . 'fonts\/Vegur.font.js');\n\tdefine('_CUFON_FONT_1', BASEURL . 'fonts\/Ma_police_de_site.font.js');\n\n\n\n\n\tdefine('_CUFON_FRAMEWORK', BASEURL . 'js\/cufon-yui.js');\n\tdefine('_MOOTOOLS_FRAMEWORK', BASEURL . 'js\/mootools-1.2-full.js');\n\tdefine('_MOOTOOLS_MYFUNCTIONS', BASEURL . 'js\/myfunctions.js');\n\n\t\/** timer stop **\/\n\t$timer['stop'] = microtime(true);\n\n\t?>\n\t\n\n\t<html xmlns="http:\/\/www.w3.org\/1999\/xhtml" xml:lang="en" lang="en">\n\t<head>\n\t\t<meta http-equiv="Content-Type" content="text\/html; charset=utf-8"\/>\n\n\t\t<title>test cufon<\/title>\n\n\t\t<!-- css -->\n\t\t<link rel="stylesheet" href="<?=_CSS;?>" type="text\/css" media="screen"\/>\n\t\t<!-- End css -->\n\n\t\t<!-- cufon inclusions -->\n\t\t<script language="javascript" type="text\/javascript" src="<?=_CUFON_FRAMEWORK;?>"><\/script>\n\t\t<script language="javascript" type="text\/javascript" src="<?=_CUFON_FONT_1;?>"><\/script>\n\t\t<!-- End cufon inclusions -->\n\n\t\t<!-- mootools -->\n\t\t<script language="javascript" type="text\/javascript" src="<?=_MOOTOOLS_FRAMEWORK;?>"><\/script>\n\t\t<script language="javascript" type="text\/javascript" src="<?=_MOOTOOLS_MYFUNCTIONS;?>"><\/script>\n\t\t<!-- mootools -->\n\n\t<\/head>\n\n\t<body>\n\n\t\t<div id="page">\n\n\t\t\t<h1 class="txt2img uppercase">Lorém ipsum dolor sît amet<\/h1>\n\n\t\t\t<br class="clear_10">\n\n\t\t\t<a href="http:\/\/www.google.fr" target="_blank" class="txt2img italic">Lien Lorém ipsum dolor sît amet lien<\/a>\n\n\t\t\t<br class="clear_10">\n\n\t\t\t<h2 class="txt2img italic">Lorém ipsum dolor sît amet<\/h2>\n\n\t\t\t<br class="clear_10">\n\n\t\t\t<h3 class="txt2img underline">Lorém ipsum dolor sît amet<\/h3>\n\n\t\t\t<br class="clear_20">\n\n\t\t\t<p class="txt2img">\n\t\t\t\tLorém ipsum dolor sît amet: consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua? Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<br \/><br \/>\n\n\t\t\t\tLorém ipsum dolor sît amet: consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua? Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n\t\t\t<\/p>\n\n\t\t\t<br class="clear_20">\n\n\t\t<\/div>\n\n\t\t<!-- IE cufon hack to correct delay -->\n\t\t<script language="javascript" type="text\/javascript"> Cufon.now(); <\/script>\n\n\t<\/body>\n\t<\/html>\n\t\n\t\n<\/pre>\nExtrait du code de styles.css<\/code><\/b><\/p>\n\n\tbody {\n\t\tfont-size: 12px;\n\t\tfont-family: arial, helvetica, sans-serif;\n\t\tbackground-color: #ffffff;\n\t\tcolor: #434343;\n\t\ttext-align: center;\n\t\tmargin: 0 auto;\n\t\tpadding: 0;\n\t}\n\ta {\n\t\tfont-size: 12px;\n\t\tcolor: #434343;\n\t\toutline: none;\n\t}\n\t.clear_O {\n\t\tline-height: 0;\n\t\tclear: both;\n\t}\n\t.clear_10 {\n\t\tline-height: 10px;\n\t\tclear: both;\n\t}\n\t.clear_20 {\n\t\tline-height: 20px;\n\t\tclear: both;\n\t}\n\th1 {\n\t\tbackground-color: #5698D2;\n\t\tmargin: 0;\n\t\tpadding: 10px;\n\t\tline-height: 16px;\n\t\tfont-size: 16px;\n\t\tfont-weight: normal;\n\t\tfont-style: normal;\n\t\ttext-decoration: none;\n\t\ttext-transform: none;\n\t\ttext-align: left;\n\t\tcolor: #ffffff;\n\t}\n\th2 {\n\t\tbackground-color: #5698D2;\n\t\tmargin: 0;\n\t\tpadding: 10px;\n\t\tline-height: 14px;\n\t\tfont-size: 14px;\n\t\tfont-weight: normal;\n\t\tfont-style: normal;\n\t\ttext-decoration: none;\n\t\ttext-transform: none;\n\t\ttext-align: left;\n\t\tcolor: #ffffff;\n\t}\n\th3 {\n\t\tbackground-color: #5698D2;\n\t\tmargin: 0;\n\t\tpadding: 10px;\n\t\tline-height: 12px;\n\t\tfont-size: 12px;\n\t\tfont-weight: normal;\n\t\tfont-style: normal;\n\t\ttext-decoration: none;\n\t\ttext-transform: none;\n\t\ttext-align: left;\n\t\tcolor: #ffffff;\n\t}\n\t\/* to be continued *\/\n<\/pre>\nLe plus important, le rendu du chargement<\/b>
\nLe police est de la Vegur<\/code> mais rien ne vous emp\u00eache de faire le test avec de la TradeGothic<\/code>, GillSans<\/code>, HelveticaNeue<\/code>… Il vous faudra cependant avoir achet\u00e9 les droits d’usage de cette police.<\/p>\n![\"Webdesign,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2009\/10\/font_with_cufont_2.jpg\")
<\/p>\n
L’interface de conversion<\/h4>\n
Au terme de cette \u00e9tape, vous obtiendrez le s\u00e9same pour votre site, c’est \u00e0 dire la conversion de votre fichier .ttf<\/code> en .font.js<\/code> qui vous permettra de la mettre en place sur votre site.<\/p>\nLe site de cuf\u00f3n<\/code> o\u00f9 vous pourrez envoyer votre .tff<\/code><\/b>
\n![\"Webdesign,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2009\/10\/font_with_cufont_3.jpg\")
<\/p>\nLes param\u00e8tres de conversion de votre police<\/b>
\n![\"Webdesign,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2009\/10\/font_with_cufont_4.jpg\")
<\/p>\n
Les param\u00e8tres plus complets de conversion de votre police<\/b>
\n![\"Webdesign,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2009\/10\/font_with_cufont_6.jpg\")
<\/p>\n
Le param\u00e8tre de s\u00e9curit\u00e9, vous devez d\u00e9clarer le site sur lequel vous allez utiliser cette police. Dans notre exemple, nous avons mis est www.google.com<\/code>, ils ont les moyens de supporter un proc\u00e8s pour du “Copyright infringement”<\/b>
\n![\"Webdesign,](\"https:\/\/flaven.fr\/wp-content\/uploads\/2009\/10\/font_with_cufont_5.jpg\")
<\/p>\nPour aller plus loin<\/h2>\n\n- Le site officiel
cuf\u00f3n - fonts for the people<\/code>
\nhttp:\/\/cufon.shoqolate.com\/generate\/<\/a><\/li>\n- Quelques sites de d\u00e9monstration utilisant
cuf\u00f3n<\/code>
\nhttp:\/\/wiki.github.com\/sorccu\/cufon\/demos<\/a><\/li>\n- Les r\u00e8gles d’utilisation de
cuf\u00f3n<\/code>
\nhttp:\/\/wiki.github.com\/sorccu\/cufon\/styling<\/a><\/li>\n- Le site dafont.com qui rec\u00e8le des tr\u00e9sors de police
\nhttp:\/\/www.dafont.com\/<\/a><\/li>\n- Des explications sur le mode de fonctionnement
cuf\u00f3n - fonts for the people<\/code>
\nhttp:\/\/wiki.github.com\/sorccu\/cufon\/about<\/a><\/li>\n- La police
Vegur<\/code> donn\u00e9e en exemple
\nhttp:\/\/github.com\/sorccu\/cufon\/blob\/master\/fonts\/Vegur.font.js<\/a><\/li>\n- Un bonne article sur comment ins\u00e9rer
cuf\u00f3n<\/code> dans WP en attendant le plugin…
\nhttp:\/\/www.fran6art.com\/webdesign\/utiliser-cufon-sur-votre-blog-wordpress\/<\/a><\/li>\n- Un point int\u00e9ressant sur
cuf\u00f3n<\/code> et ses \u00e9quivalents
\nhttp:\/\/www.alsacreations.com\/actu\/lire\/636-cufon-nouvelle-alternative-pour-intgrer-des-polices-truetype-et-opentype-au-web.html<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"L’objectif de cet article est bien de pouvoir mettre sur un site toutes les polices m\u00eame les plus exotiques. En effet, ne pas pouvoir utiliser… <\/p>\n