Phantomjs + веб-шрифты + загрузчик шрифтов

Я запускаю phantomjs в среде node.js, и все идет хорошо. На данный момент я просто использую локальные шрифты, но хочу получить веб-шрифты google, работающие с phantomjs.

Существуют различные противоречивые и запутанные отчеты о том, можно ли создавать веб-шрифты для работы с phantomjs. Есть такие статьи, как this, которые содержат устаревшую информацию с мертвыми ссылками. И такие сообщения, как , которые предполагают, что phantomjs 2.0 будут или могут поддерживать веб-шрифты, другие говорят, что это не только 2.0. 1. В это сообщение есть предложение о том, что webfonts работают в 2.0.

Я пробовал множество опций, в том числе с phantomjs 2.0 и 2.0.1 двоичные файлы, но может не получится. Возможно, я загружаю веб-шрифты в js, используя загрузчик веб-шрифтов, используя что-то следующее:

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 будет запущено.

Мое подозрение в том, что загрузчик веб-шрифтов действительно определяет, что браузер (phantomjs) не поддерживает это, поэтому всегда достигает inactive.

Кто-нибудь получил phantomjs + веб-шрифты + загрузчик веб-шрифтов?

Ответы

Ответ 1

Что такое UA, который вы используете? Я думаю, что Web Font Loader использует UA для обнаружения поддержки. Попробуйте UA из Chrome 46, а затем посмотрите, работает ли он.

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

Ответ 2

Не быть помеченным как правильно, просто расширяя вышеуказанный ответ. Поскольку все фантомные обертки (например, 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