11548 sujets

JavaScript, DOM et API Web HTML5

Changer la police d'un texte dans une balise input text avec cufon ?

Bonjour,
Est-il possible de changer la police d'un texte dans une balise input type text avec cufon.
J'ai bien mis le fichier cufon-yui.js et la police Harlow_Solid_Italic_italic_400.js dans mon code
. Ca marche avec une balise h2, dont voici le code :

<script type="text/javascript" src="../js/xhr.js"></script>
<script type="text/javascript" src="../js/cufon-yui.js"></script>
<script type="text/javascript" src="../js/Harlow_Solid_Italic_italic_400.js"></script>
<script type="text/javascript">
        
	Cufon.replace('h2');

        </script>


Mais avec le input type text avec un id="#tuning", ca ne marche pas :


<script type="text/javascript" src="../js/xhr.js"></script>
<script type="text/javascript" src="../js/cufon-yui.js"></script>
<script type="text/javascript" src="../js/Harlow_Solid_Italic_italic_400.js"></script>
<script type="text/javascript">
        
	Cufon.replace('#tuning');

        </script>
Je me permet de relancer ce sujet de discussion. J'aimerais savoir s'il était possible de "cufoniser" le texte d'un submit...

En terme d'accessibilité, serait-ce gênant?

J'ai trouvé quelques éléments de réponse ici, mais je n'arrive pas à les mettre en pratique...
Julien Vernet a écrit :
J'aimerais savoir s'il était possible de &quot;cufoniser&quot; le texte d'un submit...

À ma connaissance, non. Cufon fonctionne en remplaçant le contenu des éléments visés, ce qui n'est pas possible pour un élément INPUT. Éventuellement avec un élément BUTTON ou le contenu (SPAN par exemple) de celui-ci.

Julien Vernet a écrit :
En terme d'accessibilité, serait-ce gênant?

Cufon est gênant en termes d'accessibilité, quoi qu'on fasse avec, à mon avis.
Voici un exemple de DOM avant action de Cufon:
<h3>This is a test.</h3>

La même chose après:
<h3>
  <cufon class="cufon cufon-canvas" alt="This " style="width: 43px; height: 18.7167px;">
    <canvas width="63" height="22" style="width: 63px; height: 22px; top: -1px; left: -2px;"></canvas>
    <cufontext>This </cufontext>
  </cufon>
  <cufon class="cufon cufon-canvas" alt="is " style="width: 20px; height: 18.7167px;">
    <canvas width="39" height="22" style="width: 39px; height: 22px; top: -1px; left: -2px;"></canvas>
    <cufontext>is </cufontext>
  </cufon>
  <cufon class="cufon cufon-canvas" alt="a " style="width: 14px; height: 18.7167px;">
    <canvas width="34" height="22" style="width: 34px; height: 22px; top: -1px; left: -2px;"></canvas>
    <cufontext>a </cufontext>
  </cufon>
  <cufon class="cufon cufon-canvas" alt="test." style="width: 36px; height: 18.7167px;">
    <canvas width="54" height="22" style="width: 54px; height: 22px; top: -1px; left: -2px;"></canvas>
    <cufontext>test.</cufontext>
  </cufon>
</h3>

Dans IE ça sera différent (utilisation de VML à la place de Canvas).

Mon avis: Cufon à proscrire, @font-face (CSS3) à privilégier.
Modifié par Florent V. (02 Nov 2010 - 13:57)
Sujet clos
Aller à