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

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

Существуют различные противоречивые и запутанные сообщения о том, можно ли и как сделать веб-шрифты работать с phantomjs, Есть такие статьи, которые содержат устаревшую информацию с неработающими ссылками. И такие сообщения, которые предполагают, что phantomjs 2.0 будет или может поддерживать веб-шрифты, другие говорят, что это не так, но 2.0.1 будет. В этом посте есть предположение, что веб-шрифты работают в 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 + веб-шрифты + загрузчик веб-шрифтов?

Источник

2 ответа

Какой 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';
Источник

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