Search code examples
javascriptphpflashfont-face

Turn font-face text into bitmap rendered graphic?


Is there some way, or some flash plugin or php script that can render font-face text out as a bitmap graphic?

Transparent would be great but even if you could define foreground colour or background colour.

The reason being is I need some dynamic data to be displayed in an html font and ideally in the actually font rather than a web safe font.

Thanks Josh


Solution

  • PHP together with GD library (often installed at PHP web hosts) has the ability to render true type fonts to many image formats (including GIF, PNG, and JPG). Simple example with transparent background is:

    <?php
    $text = 'My imaged words'; // The text to draw
    
    $font = 'PORCELAIN'; // Replace path by your own font path
    
    $im = imagecreatetruecolor(250, 50); // Create the image
    
    // Create some colors
    $red= imagecolorallocate($im, 255, 0, 0);
    $black = imagecolorallocate($im, 0, 0, 0);
    
    imagecolortransparent($im, $black); // Choose transparent color
    imagettftext($im, 20, 0, 10, 30, $red, $font, $text); // Add the text
    imagegif($im, 'wordimage.gif'); // save image
    imagedestroy($im); // clear memory
    ?>
    

    More advanced examples are found at http://php.net/manual/en/function.imagettfbbox.php.

    GD library is open source and found at http://libgd.bitbucket.org.

    Free true type fonts are easily found by search enginges.