web-dev-qa-db-ja.com

phantomjsスクリーンショットフォントが見つからず、代わりにボックスがレンダリングされる

Centos 6.3でPhantomJs 1.8.1を使用して自動UIテストを実行しています。テストが失敗すると、スクリーンショットがファイルシステムに保存されます。

私の問題は、スクリーンショットが保存されていても、読みやすいフォントが含まれていないことです。

したがって、ウェブサイトが次のように表示された場合：

こんにちは世界！

サイトのスクリーンショットは次のようになります。

enter image description here

したがって、実際の文字の代わりに、小さなボックスをレンダリングして保存します。

システムはcentos 6.3です。 FreetypeとFontconfigもインストールされます。

これを修正するにはどうすればよいですか？

どうも！

phantomjs
32
nemoo

日本語フォントでも同様の問題がありました。 （PhantomJS 1.9.1、Amazon EC2のRedhat）

英語の文字は問題なく表示されましたが、日本語の文字はボックスとしてレンダリングされました。

修正方法：

1）yum installを使用して（日本語）IPAフォント（明朝とゴシック）をインストールしました。

（yum listを使用して、正確なパッケージ名を確認してください。）

2）IPA .ttfファイルが次の場所にインストールされました：

  • /usr/share/fonts/IPA-Gothic/
  • /usr/share/fonts/IPA-Mincho/

3）ダウンロードした2つの.ttfファイルを次のディレクトリに移動します：（作成）

  • /usr/share/fonts/ipa/

4）/etc/fonts/fonts.confのバックアップを作成します

5）元の/etc/fonts/fonts.confを編集して、次のように入力します：

<?xml version="1.0"?>
<!DOCTYPE fontconfig SYSTEM "fonts.dtd">
<fontconfig>
  <dir>/usr/share/fonts/ipa</dir>
  <cachedir>/var/cache/fontconfig</cachedir>
  <cachedir>~/.fontconfig</cachedir>
  <alias>
    <family>serif</family>
    <prefer>
      <family>IPAP Mincho</family>
    </prefer>
  </alias>
  <alias>
    <family>sans serif</family>
    <prefer>
      <family>IPAP Gothic</family>
    </prefer>
  </alias>
  <alias>
    <family>monospace</family>
    <prefer>
      <family>IPA Gothic</family>
    </prefer>
  </alias>
</fontconfig>

6）fc-cache -vfでフォントキャッシュを更新します

7）新しい作業フォントをお楽しみください。

落とし穴：

  • no文字（空白）が表示される場合は、フォントキャッシュが古くなっている可能性があります。 fc-cache -vfを再生成してみてください。

  • 1.9.1リリースでは、日本語、中国語、韓国語の文字が修正されています。違いがあるかどうかはわかりませんが、おそらく1.9.0からアップグレードする価値があります。

11
Jonathan Waller

私も同じ問題を抱えていました。

Urw-fontsパッケージをインストールすることで解決しました：

yum install urw-fonts

56
Michael

中国語フォントの場合、次の手順で解決しました。

Sudo apt-get install language-pack-zh-hans
Sudo apt-get install ttf-arphic-uming
Sudo apt-get install ttf-dejavu ttf-wqy-microhei
Sudo fc-cache -f -v

OSはUbuntu 12.04 LTSです

6
ryancheung

私はAmazon ec2で同じ問題を抱えていますが、これで修正します：

yum install cjkuni-ukai-fonts
4
NovemberEleven

また、依存関係のインストールを試すこともできます-FontConfig＆FreeType

yum install fontconfig
yum install freetype*
2
boksiora

コマンドラインパラメータを使用してスクリプトを実行できます。

phanthomjs --output-encoding=cp866 [params] [filename]
0
Adrián Bolonio

HTMLセクションにスタイルセクションを追加します。

<style type="text/css">
@font-face
{
    font-family:MyFont;
    src: url('MyFont.ttf') format('truetype');
}

#barcodefont
{
    font-family:MyFont;
    font-size: 42px;
    color:black;
}
</style>

次に、メインHTMLコードでフォントを使用するには、次のようにします。

<div id="MyFont">Your text using MyFont</div>

これが機能するためには、HTMLファイルとMyFont.ttfファイルの両方が、変換を実行しているPhantomJSディレクトリにある必要があります。

0
Craig Jones

アラビア語フォントでも同じ問題に直面しました。これは私がやったことです。

yum groupinstall 'Arabic Support'.

アラビア語サポートをインストールすることで解決しました。

0
pankaj

/etc/fonts/fonts.confファイルはそのままにしておきます。上記の例は、日本人のみの仕事です

yum install -y ipa-gothic-fonts.noarch ipa-mincho-fonts.noarch cjkuni-ukai-fonts.noarch bitmap-fonts bitmap-fonts-cjk urw-fonts fontconfig freetype *

yum groupinstall -y「韓国語サポート」「中国語サポート」「日本語サポート」「カンナダ語サポート」「ヒンディー語サポート」「アラビア語サポート」

fc-cache -vf

0
dappa_don

中国語でこれを試してください。

yum install bitmap-fonts bitmap-fonts-cjk
0
Lellansin