phantomjs +ウェブフォント+フォントローダー

は私がnode.js環境内phantomjsを実行している、それがうまくいっています。現時点で私はローカルフォントを使用していますが、google web fontsをphantomjsと連動させたいと思っています。phantomjs +ウェブフォント+フォントローダー

とどのようにウェブフォントがphantomjsで動作させることができるかどうかについて、そこにさまざまな矛盾と混乱の報告があります。デッドリンクを持つ古い情報が含まれているような記事はthisです。そしてphantomjs 2.0がまたはWebフォントをサポートすることができますことを示唆しているthisのようなポストは、他の人はそうでないことを言ってますが2.0.1意志。 this記事で2.0で作業を行うwebfonts提案があります。

私はphantomjs 2.0と2.0.1バイナリを含む、多くのオプションを試してみたが、それは働いて得ることができません。それは私が次のように沿って何か使用してweb font loaderを使用して、私の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枝に達しfont loader docsで

を、それは言う：

ウェブフォントローダーは、現在のブラウザは@font-face、目をサポートしていないと判断した場合e inactiveイベントがトリガーされます。

私の疑問は、ウェブフォントローダーが実際にはブラウザ（phantomjs）がこれをサポートしていないと判断しているため、いつもinactiveに届いています。

誰でも作業phantomjs +ウェブフォント+ウェブフォントローダーを得ましたか。

出典

2015-12-08 drmrbrewer

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-08 19:52:13 Neo

悲しいことに、phantomjsとしようとしました。この:-(差なし1.9.8、2.0.0および2.0.1 ...「非アクティブ」ブランチに達するたびに – drmrbrewer

私は[email protected]で試してみたerAgent。ログ： '読み込み'、 'アクティブ' .. – cviejo

@cviejoを共有するためのコードスニペットはありますか？私はまだアクティブな枝にそれを得ることができません... – drmrbrewer

上記の回答を展開してください。すべての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-10 10:53:01 cviejo

どのバージョンのphantomjsですか？ '$ phantomjs -v' – drmrbrewer

[email protected] – cviejo

1.9.19でもあったことは知りませんでしたか？ http://phantomjs.org/release-1.9.htmlを参照してくださいか、現在1.9.19のバージョンを持っているphantomjs npmパッケージhttps://www.npmjs.com/package/phantomjsを参照していますか？ – drmrbrewer

phantomjs +ウェブフォント+フォントローダー

答えて

関連する問題