PhantomJS不使用webfonts渲染屏幕截图吗? [英] PhantomJS not rendering screenshots with webfonts?

问题描述

所以我一直到处走走，似乎找不到如何使PhantomJS在屏幕截图上实际显示Web字体的解决方案，有人可以告诉我是否有办法吗?

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?

推荐答案

我已经进行了大约一个星期的测试，最后得出了答案，知道这也可能是由于我在PhantomJS上运行了Windows机器.我当前正在运行PhantomJS v1.9.7，并找到以下解决方案:

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:

在我的CSS文件中使用它:

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

不是Google推荐的故障保护":

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

似乎可以解决问题.我希望这可以使某人免于像我以前那样沮丧. 对于那些很难找出区别的人，我删除了"local()"字体，使其仅指向我真正想要的一种字体，同时删除了后备字体，我认为这与某些误报有关在PhantomJS或WebKit引擎中.

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.

这篇关于PhantomJS不使用webfonts渲染屏幕截图吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！