Cufon 101

Avatar of Chris Coyier
Chris Coyier am

1. Inkludieren Sie das JavaScript für Cufón und die Cufón-Schriftart

<script type="text/javascript" src="js/cufon-yui.js"></script>
<script type="text/javascript" src="js/TitilliumMaps.font.js"></script>

2. HTML

Normale Tags

<h1>Business Solutions</h1>
<h2>Business Insurance</h2>

3. Cufón mitteilen, die Schriftarten für die angegebenen CSS-Selektoren zu ersetzen

<script type="text/javascript">
    Cufon.replace('h1, h2', { fontFamily: 'TitilliumMaps26L', hover: true });
</script>

4. JavaScript-Fehlerbehandlung hinzufügen, falls ein Ladefehler auftritt

function handleError() { return true; }
window.onerror = handleError;

5. CSS

Die Schriftfarbe, Größe und Hover-Farbe werden über die CSS-Klassen gesteuert, die dem HTML-Element zugeordnet sind.

h1 {
   font-size: 50px;
   color: red;
}