Ich benutze Phantomjs Version 1.9.7, die meiner Meinung nach Web-Fonts unterstützen soll. Ich habe die Schriftart mit Google Web Fonts eingefügt, aber es zeigt nur meine Fallback-Schriftart, wenn ich einen Screengrab automatisiere. Der Webfont wird in allen meinen Browsern angezeigt. Gibt es Workarounds dafür?Wie kann ich Google Web Fonts mit Phantomjs verwenden
Ich habe seit einigen Stunden mit diesem Problem gekämpft. Nun, es gibt einen einfachen Grund für diese Kontroverse: User-Agent!
Einige Dienste wie Google Fonts geben basierend auf User-Agent unterschiedliche CSS-Inhalte zurück. Wenn Sie eine Webseite aufrufen, die Google Fonts mit default PhantomJs User-Agent enthält, würde Google die TTF-Version zurückgeben, die in PhantomJs unterstützt wird. Wenn Sie jedoch einen benutzerdefinierten Benutzeragenten (Chrome, FF usw.) festlegen, gibt Google Fonts .woff2 Version zurück .woff2 wird in PhantomJs 2.x nicht unterstützt. Offensichtlich werden Schriften nicht geladen.
Also, für Benutzer, die PhantomJs testen, ohne einen generischen User-Agent zu setzen, funktioniert Google Fonts. Wenn sie zum Beispiel Google Chrome user-agent einstellen, funktioniert das nicht.
Also, haben Sie zwei Möglichkeiten:
konnte ich das sogar in PhantomJS 2.1.1 verifizieren. Die Standard-UA von 'Mozilla/5.0 (Macintosh; Intel Mac OS X) AppleWebKit/534.34 (KHTML, wie Gecko) PhantomJS/2.1.1 (Entwicklung) Safari/534.34' (mit 'Chrome' abwesend) scheint zu funktionieren, wie Sie beschrieben haben über. Netter Fang. – Drakes
Jetzt (2017) Situation wurde umgekehrt: Google Fonts gibt '.woff2' Fonts für Standard UA' User-Agent: Mozilla/5.0 (Windows NT 6.2; WOW64) AppleWebKit/538.1 (KHTML, wie Gecko) PhantomJS/2.1. 1 Safari/538.1'. Um das Problem zu beheben, sollte kein Standard-User-Agent gesetzt werden, wie zB 'PhantomJS/2.1.1'. – shytikov
@shytikov Dies ist genau das, was in der Antwort erwähnt wird. Also nichts ist verändert. – Kousha
Ich glaube, Ihre Meinung ist falsch :-) Die 1.9.x-Serie von Phantom basiert immer noch auf dem alten WebKit-Code, der die Web-Schrift Probleme mit der ganzen Zeit gemeldet hat.
Die gute Nachricht ist, dass eine technische Vorschau von Phantom 2.0 erscheint; https://github.com/ariya/phantomjs/wiki/PhantomJS-2 soll der beste Ort sein, um den Status zu verfolgen. Und aus dem Gedächtnis berichtet jemand Erfolg mit Web-Fonts, die es verwenden (aber ich kann mich damit irren, da eine schnelle Suche in den Mailing-Listen-Archiven keine definitive Nachricht ergab, dass Web-Fonts funktionieren ... aber sie sollten definitiv ).
BTW, SlimerJS ist ein fast drop-in Ersatz, basierend auf Firefox Gecko-Engine, und unterstützt Webfonts (obwohl einige Probleme in Eckfällen, IIRC).
"Ich glaube ..." ein Beispiel oder sogar eine Verbindung zu etwas, das Sie glauben lässt, dass dies hilfreich wäre. Es gibt ein geschlossenes Problem hier: https://github.com/ariya/phantomjs/issues/10592. Es ist jedoch weiterhin ein beunruhigendes Problem. Ein Beispiel dafür wäre am hilfreichsten. –
@ st.derrick Web-Fonts, die in der Phantom 1.x-Serie nicht unterstützt werden, habe ich in der Phantom-Mailing-Liste erwähnt. (Die Probleme mit der Ecke bei Web-Fonts in SlimerJS wurden auf der Slim-Mailing-Liste erwähnt.) –
@ st.derrick Lesen Sie sich das Bug-Problem durch. Hört sich an, wie ich mich daran erinnerte - ein großes Durcheinander! Manche Leute sagen immer noch, dass es selbst mit PhantomJS 2.0 nicht zuverlässig funktioniert - es sieht so aus, als könnte es einige komplizierte Abhängigkeiten von Ubuntu-Paketen geben? –
Ich hatte gerade das gleiche Problem mit PhantomJS 2.1.1. In meinem Fall arbeitete ich unter einem Proxy, der PhantomJS davon abhielt, die Schriftart von Google zu laden. Nach dem Verbinden mit einem offenen Netzwerk wurde es korrekt gerendert.
Ich habe alle hier aufgeführten Korrekturen vergeblich versucht, aber hier ist eine Arbeit um. Beide Optionen haben das für mich gelöst.
Erste Option: Installieren Sie die fehlenden Web-Schriftarten auf dem lokalen Computer, PhantomJS läuft. Die meisten Web-Font-Anbieter, einschließlich Google, ermöglichen Ihnen das einfache Herunterladen der Schriftarten für die lokale Installation. Keine Änderung an der Ziel-URL erforderlich.
Zweitens: Ich Websites, die ich habe Kontrolle, konnte ich auflösen, indem Sie die Link-Tags aufteilen.
ändern Diese aus:
<link href='//fonts.googleapis.com/css?family=Roboto:400,500,700|Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
An:
<link href='//fonts.googleapis.com/css?family=Roboto:400,500,700' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>
weiß, dass ich dies keine ideale Lösung, aber irgendein man arbeitet, es hängt davon ab, ob Sie das Ziel ändern URL
Fügen Sie dies zu meinem CSS: @import URL (http://fonts.googleapis.com/css?family=Open+Sans); – alexrogins
Ich habe gerade versucht [Bootstrap Fonts] (http://getbootstrap.com/components/) mit Phantomjs Version 1.9.7 auf Windows und die Erfassung funktionierte. Vielleicht können Sie versuchen, es auf die gleiche Weise zu integrieren, da es mehrere Fallbacks gibt. –