fonts vervangen met EOT
Download de laatste versie van de WEFT software hier. Voor dit voorbeeld is versie 5.3.2 gebruikt. Let op: deze software werkt alleen op Windows en wordt al geruime tijd niet meer onderhouden.
stappen
- Zorg ervoor dat het font dat je wilt gebruiken, geinstalleerd is op de PC.
- Klik op “New” om een nieuw “font embed project” te starten.
- Vul je naam en e-mailadres in en druk op “Next”.
- Vul de URL van je pagina in en kies “file://” als protocol als je op je eigen harddisk aan het ontwikkelen bent. Druk op “Add” en vervolgens op “Next”.
- Vink “Skip analysis” aan en druk op “Next”.
- Druk in het volgende scherm op “Add” om een font te kiezen.
Druk daarna op “Next”.
- Nu geef je de plaats op waar het EOT bestand aangemaakt moet worden. Selecteer weer “file://” en als locatie bijvoorbeeld C:\TEMP\.
Vink de opties “Create font declarations with relative URLs” en “Show CSS @font-family declarations” allebei aan. Druk daarna op “Next”.
- Er opent zich nu een popup waarin de @font-face declaratie staat. Kopieer (Control-C) deze code.
- Maak een C:\TEMP\test.htm aan.
- Plak vervolgens de bewaarde code in de <head>-tag.
<STYLE TYPE=”text/css”>
<!– /* $WEFT — Created by: Cees Rijken (cees@connectcase.nl) on 21-4-2008 — */
@font-face {
font-family: Algerian;
font-style: normal;
font-weight: normal;
src: url(file:///C:\TEMP\ALGERIA0.eot);
}
–>
</STYLE> - Maak binnen de <STYLE></STYLE>-tag een extra CSS class aan die het nieuwe font aanroept, zoals bijvoorbeeld:
.algerian {font-family:Algerian, Arial, Helvetica, sans-serif}
- Pas deze class toe in de <body>-tag:
<p class=”algerian”>dit is een p-tag met het Algerian font….</p>
- Open C:\TEMP\test.htm in een browser met als resultaat: klik hier
Bronnen en links:
NIC, http://webservices.nic.in/wsmad/ResourceCentre/hindiweb.aspx
W3C, http://www.w3.org/TR/REC-CSS2/fonts.html#font-descriptions.
Geen posts
geen opmerkingen...