2015-12-08 23 views
12

node.js ortamında phantomjs çalışıyorum ve iyi gidiyor. Şu anda sadece yerel yazı tiplerini kullanıyorum ama phantomjs ile çalışmak için google web fonts almak istiyorum.phantomjs + web fontları + font yükleyici

Web yazı tiplerinin phantomjs ile çalışıp çalışmadığına dair çeşitli ve birbiriyle çelişen ve kafa karıştırıcı raporlar var. Ölü bağlantılar içeren güncel olmayan bilgiler içeren this gibi makaleler bulunmaktadır. Ve this ve phantomjs 2.0 web yazı tiplerini destekleyeceğini veya destekleyebildiğini belirten diğer yayınlar 2.0.1 olacaktır. this yayında, web fontlarının 2.0'da çalışması için bir öneri vardır.

Ben phantomjs 2.0 ve 2.0.1 ikili dahil olmak üzere, birçok seçenek denedim ama çalışmıyor alınamıyor.

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); } 
}); 

Ama yazı yükü asla başarılı yüzden hep inactive şube ulaşan ediyorum ...: Ben şu boyunca bir şey kullanarak web font loader kullanarak js web yazı tiplerini yükleme ediyorum olabilir . aynı kod, bir tarayıcıda çalışıyor olsa bile (active şube ulaşan font loader docs yılında

, diyor:

Web Yazı Tipi Yükleyici geçerli tarayıcı @font-face, inci desteklemediğini belirlerse e inactive olayı tetiklenecektir.

Benim şüphe web yazı yükleyici gerçekten dolayısıyla hep inactive ulaşan tarayıcı (phantomjs) bu desteklemediği belirleyici olmasıdır.

Herkes phantomjs + web yazı tiplerini + web yazı tipi yükleyici çalıştıran var mı?

cevap

4

Kullandığınız UA nedir? Web Yazı Yükleyicisi'nin desteği algılamak için UA'yı kullandığını düşünüyorum. Bir Chrome Chrome 46'yı deneyin ve ardından işe yarayıp yaramadığını görün.

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'; 
+0

Ne yazık ki, phantomjs ile çalıştı bu :-(fark 1.9.8, 2.0.0 ve 2.0.1 ... sadece inaktif şubeye ulaştığı zaman – drmrbrewer

+2

Sadece [email protected] ile denedim, bizi değiştirdi erAgent. Günlükler: 'loading',' active' .. – cviejo

+0

@cviejo paylaşmak için herhangi bir kod snippet'iniz var mı? Ben hala 'aktif' dalına alamıyorum ... – drmrbrewer

2

Doğru olarak işaretlenmemesi için, yukarıdaki yanıtta yalnızca genişletiliyor. Tüm phantomjs sarmalayıcıları (phridge ve phantomjs-node gibi) temel olarak yeni bir phantomjs işlemi ürettiğinden, sonuç bir nodejs bağlamından çalıştırıldığında aynı olmalıdır.

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); 
}); 

Komut:

phantomjs phantomjs-webfonts.js 

Çıktı:

Console: WebFonts loading 
Console: WebFonts active 
Loading status: success 
+0

Hangi versiyon phantomjs? '$ phantomjs -v' – drmrbrewer

+0

[email protected] – cviejo

+0

1.9.19 bile olduğunu bilmiyordum? Bkz. Http://phantomjs.org/release-1.9.html Yoksa şu an 1.9.19 sürümüne sahip olan https://www.npmjs.com/package/phantomjs adresindeki phantomjs npm paketini mi kullanıyorsunuz? – drmrbrewer