Display all font file characters

Question

I'm wondering if there is a way to display all font file characters using HTML/CSS/JS/PHP?

Let's say I would like to display all possible "Arial" characters. Or characters from custom @font-face font.

Answer 1

Fonts can map a wide range of Unicode characters, using codes from 0 to 0x10FFFF. Thus if you really want to see everything in any random font, doing it in a loop as has been suggested in other answers is really going to be problematic. Even for the "simple" example of Arial, the lowest mapped character is U+0020 and the highest is U+FB02. Not everything in that range is mapped, however, so if you did that in a loop you'd end up with a lot of empties. Not to mention it would likely be pretty slow.

To do what you want effectively, you're going to need something to crack open the font file, examine the cmap table, and get a list of mapped characters (not a range). I'm not sure what your setup is, but you could probably do this server-side with something like FreeType or some such.

Answer 2

I would like to suggest you try GD library imagettftext() function. Example from manual:

// Set the content-type
header('Content-Type: image/png');

// Create the image
$im = imagecreatetruecolor(400, 30);

// Create some colors
$white = imagecolorallocate($im, 255, 255, 255);
$grey = imagecolorallocate($im, 128, 128, 128);
$black = imagecolorallocate($im, 0, 0, 0);
imagefilledrectangle($im, 0, 0, 399, 29, $white);

// The string with character sets
for($i=0; $i<256; $i++){ 
     $text.= chr($i); 
} 

// Replace path by your own font path
$font = 'arial.ttf';

// Add some shadow to the text
imagettftext($im, 20, 0, 11, 21, $grey, $font, $text);

// Add the text
imagettftext($im, 20, 0, 10, 20, $black, $font, $text);

// Using imagepng() results in clearer text compared with imagejpeg()
imagepng($im);
imagedestroy($im);