我正在尝试在商业Web开发项目中使用超棒的字体堆栈,我们已经进入工作阶段,但是仍然有一个问题.

在移动设备(或不支持导入的字体栈的浏览器)上浏览我们的网站时,所有图标都被替换为正方形(因为font-awesome使用Unicode字符表示图标).

这打破了我们网站的外观和风格(特别是我们编写的自定义管理面板)的许多方式.

我们提出的解决方案是使用PHP渲染包含所需图标的图像(带有我们要指定的颜色作为参数,以及大小等).

这以前从来都不是问题,但是现在让PHP呈现私有使用区(PUA)字符非常麻烦.

这是我尝试使用的一些示例代码：

<?php
  $icons = array(
    "icon-glass" => "\f000",
    "icon-music" => "\f001",
    "icon-search" => "\f002",
    // [...]
  );
  $font = "_assets/fonts/font-awesome/fontawesome-webfont.ttf";
  if(isset($_GET['icon'])) {
    $chr = $icons[$_GET['icon']];
    header("Content-type: image/png");
    $img = imagecreatetruecolor($_GET['w'], $_GET['h']);
    imagealphablending($img, true);
    $transparent = imagecolorallocatealpha( $img, 0, 0, 0, 127 );
    imagefill( $img, 0, 0, $transparent );
    $black = imagecolorallocate($img, 255, 0, 0);
    imagettftext($img, 20, 0, 32, 32, $black, $font, $chr);
    imagesavealpha($img, true);
    imagepng($img);
    exit;
  }
?>
<div style="background-color:black; width:64px; height:64px;">
  <img src="dev?icon=icon-dashboard&w=64&h=64">
</div>
<br />
<div style="background-color:blue; width:64px; height:64px;">
  <img src="dev?icon=icon-bolt&w=64&h=64">
</div>

但是,这似乎只是在图像内部渲染正方形.我在想这是因为我向PHP输入的Unicode字符很差,而我可能错过的确很愚蠢.

欢迎任何建议.

解决方法:

我用来渲染Font Awesome TTF字形的PHP代码(主要是)：

$text = json_decode('""');
...
imagesavealpha($im, true);
$trans = imagecolorallocatealpha($im, 0, 0, 0, 127);
imagefill($im, 0, 0, $trans);
imagealphablending($im, true);

$fontcolor = imagecolorallocatealpha($im, 0, 0, 0, 0);

// Add the text
imagettftext($im, $x, 0, 0, 0, $fontcolor, $font, $text);
imagesavealpha($im, true);
imagepng($im);
imagedestroy($im);

json-decode()处理Unicode字符的复杂性.我使用的是GD 2或更高版本,因此必须使用点而不是像素.

我的完整课程考虑了所需的高度,但是忽略了宽度.您可以在https://github.com/sperelson/awesome2png查看它.