So I have been looking around and can't seem to find a solution on how to get PhantomJS to actually display webfonts on screenshots, can anyone tell me if there is a way to do this?
I have been testing and testing for about a week now and finally came up with the answer, know that this might also be a result of me running PhantomJS on a Windows machine. I am currently running PhantomJS v1.9.7 and have found the following solution:
Using this in my CSS file:
#font-face {
font-family: 'Vampiro One';
src: url(http://themes.googleusercontent.com/static/fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
.vamp {
font-family: "Vampiro One";
font-size: 1.5em;
}
Instead of the Google recommended "failsafe":
#font-face {
font-family: 'Vampiro One';
font-style: normal;
font-weight: 400;
src: local('Vampiro One'), local('VampiroOne-Regular'), url(http://themes.googleusercontent.com/static/fonts/vampiroone/v3/Ho2Xld8UbQyBA8XLxF1_NYbN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
.vamp {
font-family: 'Vampiro One', cursive;
font-size: 1.5em;
}
seems to do the trick. I hope this saves someone from being as frustrated as I have been.
To those who have a hard time spotting the difference, I removed the "local()" fonts to it only point to the one font I really want, as well as removing fallback fonts, I am thinking this has to do with some false positive in either PhantomJS or the WebKit engine.
Related
I want to embed 'HelveticaNeueLTCom-BdCn.ttf' in a PDF document. I'm using Grails rendering 0.4.4 Plugin to generate PDF file.
I tried following,
#font-face {
font-family: 'Helvetica';
src: url('${grailsApplication.config.grails.serverURL}/fonts/HelveticaNeueLTCom-BdCn.ttf');
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
but it doesn't work.
The font embedding requires the below steps to be followed. This worked for me.
Try and tell me your feedback
The PdfRenderingService class present inside the plugin should be
edited for this font simulation as below.
protected doRender(Map args, Document document, OutputStream outputStream)
{
def renderer = new ITextRenderer()
// add the real font path from the server to be deployed to.
//I have it in the assets folder of my project
def path=servletContext.getRealPath("/")+"assets/HelveticaNeueLTCom-BdCn.ttf"
ITextFontResolver fontResolver=renderer.getFontResolver();
//add the encoding and embedded types to the font
fontResolver.addFont(path,BaseFont.IDENTITY_H, BaseFont.EMBEDDED);
configureRenderer(renderer)
renderer.setDocument(document, args.base)
renderer.layout()
renderer.createPDF(outputStream)
outputStream.close();
}
Add the below code in your template file
#font-face {
font-family: "Helvetica";
src: url("${grailsApplication.config.grails.serverURL}/assets/HelveticaNeueLTCom-BdCn.ttf") format("truetype"),
url("${grailsApplication.config.grails.serverURL}/assets/HelveticaNeueLTCom-BdCn.woff") format("woff"),
url("${grailsApplication.config.grails.serverURL}/assets/HelveticaNeueLTCom-BdCn.svg#HelveticaNeueLTCom-BdCn") format("svg");
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: Identity-H;
}
#font-face { src:url(${grailsApplication.config.app.serverUrl}/arialuni.ttf) ; -fs-pdf-font-embed: embed; -fs-pdf-font-encoding: Identity-H; }
This worked for me.
Probably the problem is that you have your url value surrounded by ' instead of ".
The difference between them is that, though in Groovy string literals can be made with both, only the ones surrounded by " create GString, which evaluates statements between ${}
This worked for me
#font-face {
src: url("path/to/KF-Kiran.ttf");
-fs-pdf-font-embed: embed;
-fs-pdf-font-encoding: cp1250;
}
div {
font-family: 'KF-Kiran'; // here give the same name of .ttf file.
}
I have defined some font CSS rule which has absolute urls like
#font-face {
font-family: 'Oxygen';
font-style: normal;
font-weight: 700;
src: local('Oxygen Bold'), local('Oxygen-Bold'), url(http://themes.googleusercontent.com/static/fonts/oxygen/v2/yVHpdQrmTj9Kax1tmFSx2j8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
but when I do the bundling with absolute URLs. I hit the 400 exception as it's unable to resolve the path.
"NetworkError: 400 Bad Request - Something/Content/css/http:/themes.googleusercontent.com/static/fonts/oxygen/v2/RzoNiRR1p2Mqyyz2RwqSMw.woff"
RzoNiR...Mw.woff
You might want to customize CssRewriteUrlTransform and ignore paths that start with https:// and http://
BundleConfig.cs
bundles.Add(new StyleBundle("~/Content/styles").Include(
"~/Content/css/test.css"
)
);
_Layout.cshtml
#Scripts.Render("~/Content/styles")
Test.css
body{
font-size: 75%;
color: #232323;
text-align: left;
margin: 0px;
padding: 0px;}
This is what Chrome shows as being loaded giving me a Syntax Error about an unexpected token { :
body{font-size:75%;color:#232323;text-align:left;margin:0;padding:0}
I would've selected Abi's answer for the link he provided, but it was a comment rather than an answer. So, I'm posting this as the answer to ensure this question is marked as resolved.
Basically, the link Abi provided stated that the reason for the error is that the browser was trying to load css as though it was javascript.
I realized right away that I was using #Scripts.Render() and should've been using #Styles.Render() instead.
I installed question2answer on my mac and i login by Safari and ask a question, after posted the question, i view the question, there is a strange line in the content:
next_pages_container { width: 5px; hight: 5px; position: absolute; top: -100px; left: -100px; z-index: 2147483647 !important; } test question
but it works fine if i use Chrome.
I think this code line is a css code, i don't know why it's display in the content.
Anybody can help me? thanks.
Apparently, it is a bug in "Evernote Web Clipper" for Safari:
http://discussion.evernote.com/topic/26375-help-clipper-injects-clearly-html-into-my-pages/
The clipper inserts the code in all editable areas. The suggested workaround is to disable the clipper.
I'm using SASS with Rails 3.2.3 and Ruby 1.9.3 in RVM.
My issue is that, for one reason or another, my SASS box-shadow mixin causes Internet Explorer 8 to crash on page load, no error from IE, just completely closes. If I remove the mixin, it opens perfectly...The mixin looks like:
#mixin boxShadow($params) {
-moz-box-shadow: $params;
-webkit-box-shadow: $params;
box-shadow: $params;
}
I have this at the top of my application.scss
#import 'mixins';
I'm using the mixin as such:
#include boxShadow(0px 1px 3px #999);
Any idea why this could be happening?
Turned out to be an old version of respond.min.js blowing things up!