Menu
The screen capture is great, but the custom @font-face fonts aren't being rendered. Is it possible to correct this?
675
Since PhantomJS is using WebKit, a real layout and rendering engine, it can capture a web page as a screenshot. Because PhantomJS can render anything on the web page, it can be used to convert HTML content styled with CSS but also SVG, images and Canvas elements.
In the @font-face rule you must first define a name for the font (e.g. myFirstFont), and then point to the font file. To use the font for an HTML element, refer to the name of the font (myFirstFont) through the font-family property:
In the examplessubdirectory, there is a script rasterize.jswhich demonstrates a more complete rendering feature of PhantomJS. An example to produce the rendering of the famous Tiger (from SVG):
Beside PNG format, PhantomJS supports JPEG, GIF, and PDF. In the examplessubdirectory, there is a script rasterize.jswhich demonstrates a more complete rendering feature of PhantomJS. An example to produce the rendering of the famous Tiger (from SVG):
After doing some research for a bit I found this
http://code.google.com/p/phantomjs/issues/detail?id=247
Looks like SVG works the best.
One problem I ran into while testing a screenshot again after using an SVG version of the font was WebKit caching the old page and still showing the broken fonts. Make sure your server explicitly tells it to not use a cached version, or clean WebKits cache.
160
I've build PhantomJS with Webfonts support for OSX and Linux - You can use the binaries directly -
Download From: http://arunoda.me/blog/phantomjs-webfonts-build.html
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
