4

商用の Web 開発プロジェクトで font-awesome スタックを使用しようとしていますが、作業段階に達しましたが、1 つの問題が残っています。

モバイル デバイス (またはインポートされたフォント スタックをサポートしていないブラウザー) で Web サイトを表示すると、すべてのアイコンが正方形に置き換えられます (font-awesome はアイコンを表すために Unicode 文字を使用するため)。

これにより、Web サイトのルック アンド フィールの多くが損なわれます (特に、コーディングしたカスタム管理パネル)。

私たちが思いついた解決策は、必要なアイコンを含む画像を 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 に正しく入力していないためだと考えています。

どんな提案でも大歓迎です。

4

1 に答える 1

4

Font Awesome TTF グリフをレンダリングするために使用した PHP コード (ほとんど):

$text = json_decode('"&#xF099;"');
...
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で表示できます。

于 2013-08-10T13:52:55.550 に答える