显示所有字体文件字符

Question

我想知道是否有一种方式可以使用HTML/CSS/JS/PHP显示所有字体文件字符？

假设我想显示所有可能的"Arial"字符。或者来自定制@font-face字体的字符。

- Atadj

Answer 1

字体可以映射从0到0x10FFFF的广泛范围的Unicode字符。因此，如果你真的想在任何随机字体中看到所有的字符，按其他答案建议的方式循环是会有问题的。即使对于Arial这个“简单”的示例，最低映射字符是U+0020，最高映射字符是U+FB02。但并不是该范围内的所有字符都被映射，所以如果你使用循环，你将得到很多空的结果。更不用说这可能会非常缓慢了。

为了有效地做到您想要的，您需要找到一些方法来打开字体文件，检查cmap表，并获取映射字符列表（而不是一个范围）。我不确定您的设置是什么，但您可以像使用FreeType或类似工具一样，在服务器端执行此操作。

- djangodude

---

有价值的信息。谢谢！我只是想获得类似于Windows 7“字符映射表”的东西，它显示字体带有的所有可能字符。 - Atadj

是的。唯一的方法就是查看字体的cmap表（这正是字符映射所做的）。 - djangodude

Answer 2

我建议您尝试使用GD库imagettftext()函数。 手册中的示例：

// 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);

- chridam

---

这是一个不错的功能，但我更感兴趣的是从字体文件（如arial.ttf）中打印内容（所有字符）。您的答案在某些情况下肯定也很有用。 - Atadj

在我的编辑中，我已经包含了一个包含所有字符的测试字符串。 - chridam

如果您想通过 jQuery 更改字体，您需要使用 AJAX 生成新图像；或者您需要预先渲染所有图像。 - Pitchinnate

Answer 3

你可以使用chr函数和for循环。你会得到一些不存在的字符，但这是快速简便的方法。如果你想要更具体地指定起始和结束的ASCII值，也可以这样做。

for($x=1;$x<=255;$x++) {
    echo chr($x) . "&nbsp;"; 
}

然后你可以使用jQuery动态地改变字体样式。

- Pitchinnate

---

谢谢！我认为这回答了问题，但是我也想跳过缺失的字符。这些字符有任何范围吗？我怎么知道第一个和最后一个可用字符的编号是多少？ - Atadj

不同的字体有不同的可用字符。我不确定如何跳过空白字符。我会试着玩一下看看能否想出什么办法。 - Pitchinnate

你主要是在寻找0-9、a-z和A-Z吗？这些应该在所有字体中都可用，我们可以将其缩小到这些范围。 - Pitchinnate

不能保证0-9、a-z和A-Z会出现在任何随机字体中，特别是@font-face字体可能已经被子集化以减小大小。唯一确定的方法是检查特定实例的字体。 - djangodude

Answer 4

我曾经遇到过类似的情况，我通过解析 .svg 文件来解决它。因此，如果您没有 SVG 文件，则可以将 ttf 转换为 SVG，然后解析它以获取可用字符的 Unicode。

- Solcre