Je hebt een tekst, maar het lettertype wordt niet ondersteund, voor statische tekst maak ik altijd een gebruik van een afbeelding, en voor dynamische tekst een PHP script die met behulp van de GD library de tekst genereerd.
Tegenwoordig zijn er verschillende technieken:
Cufón bestaat uit twee onderdelen, een font generator en de rendering engine.
De werking
Lettertype → SVG lettertype → XML structuur → VML → JSON / JavaScript.
Font Generator
Rendering engine (JavaScript)
Internet Explorer → VML render engine
Overige browsers → HTML5 canvas
In de bron code...
<script src="cufon-yui.js" type="text/javascript"></script> <script src="Museo_Sans_500.font.js" type="text/javascript"></script>
<script language="JavaScript">
Cufon.replace('h1');
</script>
Voordelen
- Je kan elk gewenst "commercieel" lettertype gebruiken;
- Je kan alléén de tekens (e.g. uppercase, lowercase, numerals, punctuation, etc.) inladen die je nodig heb.
Nadelen
- De implementatie is soms lastig, met name als er een hover wordt gebruikt;
- Voor elke letter wordt een VML/HTML5 canvas gegenereerd, hierdoor is het niet geschikt voor grote stukken tekst;
- De tekst wordt niet gelezen door zoekmachines.
De werking
Google Font API → @font-face → Google Font Directory (Web Open Font Format)
In de bron code...
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
body {
font-family: 'Tangerine', serif;
font-size: 48px;
}
Snelheid
Een feature van Google Web Fonts API is dat je per font kan zien hoeveel extra het laden van de pagina duurt:
Voordelen
- De implementatie is vrij eenvoudig;
- Je kan standaard CSS opmaak gebruiken op het lettertype.
Nadelen
- Je alleen open-source fonts gebruiken uit de Google Web Fonts collectie;
- Je pagina laad in theorie een stuk langzamer, omdat deze afhankelijk is van een derde partij.
Meer informatie: Getting Started - Google Web Fonts — Google Developers