Hoe kan ik een bijzonder lettertype weergeven op mijn website

Inleiding

Voor websites heb je vaak maar een beperkt aantal fonts tot je beschikking. Stel dat je zelf een mooi exostisch font hebt op je pc en je wilt deze gebruiken voor de hoofstuktitels van je website, dan werkt dat alleen als de andere gebruiker ook jouw font heeft.

Via programmeertaal php is er wel een mogelijkheid om dit te bereiken. De tekst wordt via php omgezet in een plaatje. Deze tekst is dan in jouw exotische font. Zie het volgende stappenplan.

Stappen

  • Maak een tekstbestand aan met de volgende naam: img.php
  • Open het bestand met notepad, of wordpad.
  • Plaats de volgende code in het document:
<?php

$font=$_SERVER["QUERY_STRING"];

header("Content-type: image/gif");
$im=@imagecreatetruecolor(300,50)or die("Cannot Initialize new GD image stream");

$black=imagecolorallocate($im,0,0,0);
$white=imagecolorallocate($im,255,255,255);

imagefill($im,0,0,$white);

imagettftext($im,32,0,5,35,$black,exotischfont.ttf',$font);

imagegif($im);
imagedestroy($im);

?>
  • Deze code bevat 1 instelling, namelijk de locatie van je exotische font. Zoals hierboven staat het font in de hoofdmap van je website.
  • FTP het bestand img.php naar de hoofdmap van je website.
  • FTP je exotische font naar de hoofdmap van je website. Je kan ook een aparte map aanmaken voor dit font, b.v. 'fonts'.
  • Bewerk het html-bestand waarvan je wilt dat het het exotische font weergeeft. Plaats daar de volgende code:
<IMG SRC="img.php?Hoofdstuk1">
  • FTP het bewerkte html-bestand naar je website.

Klaar!

Risico's en Tips

  • Je provider moet de PHP GD bibliotheek ondersteunen. Bij vele providers is dit standaard aanwezig.
  • Het instellen van de locatie van je font is heel belangrijk. Doe je dit niet goed, dan krijg je kruisjes te zien.
  • De verwijzing naar het font is HoOfDlEtTeR-gevoelig. De bestandsnaam dus exact overnemen.

Handige Links

  • PHP handleiding over de functie 'imagettftext'

http://phparadise.de/php-manual/imagettftext/

  • Een stapje verder: het dynamisch aanpassen van teksten naar een ander font.

http://alistapart.com/articles/dynatext/


Reacties (0)

Reageer
Geen resultaten gevonden