12

環境内でphantomjsを実行していnode.jsますが、うまくいっています。現時点ではローカル フォントのみを使用していますが、phantomjs で動作するGoogle Web フォントを取得したいと考えています。

Web フォントを .NET で動作させることができるかどうか、またその方法については、さまざまな矛盾する紛らわしい報告がありますphantomjs。このようなリンク切れの古い情報を含む記事があります。そして、このような投稿は、 phantomjs 2.0が Web フォントをサポートする、またはサポートできることを示唆しています。この投稿では、Web フォントが2.0で機能するという提案があります。

phantomjs 2.0および2.0.1バイナリを含む多くのオプションを試しましたが、機能しません。次のようなものを使用して、 Webフォントローダーを使用してjsにWebフォントをロードしている可能性があります。

WebFont.load({
    google: {
        families: ['Droid Sans', 'Droid Serif']
    },
    loading: function() { console.log('loading'); },
    active: function() {
        console.log('active');
        // hooray!  can do stuff...
    },
    inactive: function() { console.log('inactive'); },
    fontloading: function(familyName, fvd) { console.log('fontloading', familyName, fvd); },
    fontactive: function(familyName, fvd) { console.log('fontactive', familyName, fvd); },
    fontinactive: function(familyName, fvd) { console.log('fontinactive', familyName, fvd); }
});

しかし、私は常にinactiveブランチに到達しているため、フォントの読み込みは決して成功しません...ブラウザで同じコードが正常に機能しても(activeブランチに到達します.

フォントローダーのドキュメントでは、次のように述べています。

Web Font Loader が、現在のブラウザーが をサポートしていないと判断した場合@font-face、inactiveイベントがトリガーされます。

私の疑いでは、Web フォント ローダーは実際にブラウザー (phantomjs) がこれをサポートしていないと判断しているため、常にinactive.

phantomjs + Web フォント + Web フォント ローダーを動かした人はいますか?

4

2 に答える 2

4

使用している UA は何ですか? Web Font Loader は UA を使用してサポートを検出していると思います。Chrome 46 の UA を試して、動作するかどうかを確認してください。

var webPage = require('webpage');
var page = webPage.create();
page.settings.userAgent = 'Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36';
于 2015-12-08T19:52:13.853 に答える
2

上記の回答を拡張するだけで、正しいとマークされることはありません。すべての phantomjs ラッパー ( phridgeやphantomjs -nodeなど) は基本的に新しい phantomjs プロセスを生成するため、nodejs コンテキストから実行した場合の結果は同じになります。

phatomjs-webfonts.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PhantomJS WebFontsTest</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script>
<script>
    WebFont.load({
        google: {
            families: ['Droid Sans', 'Droid Serif']
        },
        loading:  function(){ console.log('WebFonts loading'); },
        active:   function(){ console.log('WebFonts active'); },
        inactive: function(){ console.log('WebFonts inactive'); }
    });
</script>   
</body>
</html>

phantomjs-webfonts.js:

var page = require('webpage').create();

page.settings.userAgent = 'Mozilla/5.0 (Windows NT 5.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.86 Safari/537.36';

page.onConsoleMessage = function(msg, lineNum, sourceId) {
  console.log('Console: ' + msg);
};

page.open('http://<server-address>/phantomjs-webfonts.html', function(status) {
  console.log("Loading status: " + status);
});

指示：

phantomjs phantomjs-webfonts.js

出力:

Console: WebFonts loading
Console: WebFonts active
Loading status: success
于 2016-01-10T10:53:01.207 に答える