Cufon, l’alternativa ai Font Flash

Posted: 13th Settembre 2011 by Daniele Crupi in Blog, Web Programming
Commenti disabilitati su Cufon, l’alternativa ai Font Flash

Cufon è il sistema rivoluzionario che ti permette di inserire font alternativi all’interno del tuo sito web.
E’ una valida alternativa ai font creati con flash o al nuovo @font-face del css3.

Funzionamento

  1. Scarica cufon-yui.js dal sito di cufon e fai l’upload sul tuo server.
  2. Usa il generatore di font presente sul sito di cufon:
    1. Scegli il font che vuoi convertire.
    2. Spunta il checkbox EULA sotto il campo di upload del file.
    3. Lascia i settaggi di default che vanno bene alla maggior parte delle persone.
    4. Accetta alla fine i termini di condizione e convalida il forme hai fatto!
  3. Fai l’upload del font.js generato sul tuo server. Puoi rinominare il file se desideri.
  4. Il tuo HTML dovrebbe essere più o meno così: 
    <!doctype html><html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Playing with Cufón</title> <!-- Stylesheets here, before all scripts. Helps avoid styling issues. -->
<link rel="stylesheet" type="text/css" href="style.css" /> <!-- If you want to use complex selectors with Cufón, load a selector engine (JavaScript framework) here. We support jQuery, Sizzle, MooTools, Dojo, Prototype and other popular frameworks. -->
<script type="text/javascript" src="cufon-yui.js"></script>
<script type="text/javascript" src="YourFont.font.js"></script>
<script type="text/javascript">// <![CDATA[
 Cufon.replace('h1'); // Works without a selector engine
 Cufon.replace('#sub1'); // Requires a selector engine for IE 6-7, see above
// ]]></script>
</head>
<body>
<h1>Your custom font here</h1>
<h2 id="sub1">Your custom font here too</h2>
 <!-- To avoid delays, initialize Cufón before other scripts at the bottom -->
<script type="text/javascript">// <![CDATA[
 Cufon.now();
// ]]></script><!-- Google Analytics and other scripts here -->
</body></html>
  5. Fai attenzione nel tuo HTML a:
    • Usare un doctype tradizionale o l’ HTML5 doctype.
    • Evitare gli spazi bianchi prima del doctype.
    • UTF-8 è l’unico charset supportato.

Comments are closed.