Question

最近，我正在使用幻像js进行一些实验，以获取html代码的屏幕截图，但我发现了物化图标字体的异常错误。

我已经制作了像这样的演示html

<!DOCTYPE html>
<html lang='en'>
  <head>
    <title>Demo</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
    <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'> 
    <style>
         html {
            font-family: 'Roboto', sans-serif;
         }
    </style>
  </head>
  <body>
      Hello this is using roboto
      <i class='material-icons'>favorite_border</i>
  </body>
</html>

Roboto工作得很好但是材料图标不起作用。以下图片是我得到的结果：

这应该是我得到的：

我认为这是因为材料图标使用

-webkit-font-feature-settings: 'liga'

而phantomjs不支持它，对吗？字体真棒工作得很好。任何线索？

我在ubuntu服务器上运行它16.04 lts和幻影js是2.1.1 谢谢你的帮助

Answer 1

看起来这已经在最新的beta 2.5版本的phantomjs中得到修复，请参阅https://github.com/ariya/phantomjs/issues/14885。

另一种解决方案是自我托管网络前端。如果您从自己的服务器上提供字体服务，那么phantomjs在呈现它时没有问题。

Answer 2

你的例子还可以!!!

<!DOCTYPE html>
<html lang='en'>
  <head>
    <title>Demo</title>
    <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet'>
    <link href='https://fonts.googleapis.com/icon?family=Material+Icons' rel='stylesheet'> 
    <style>
         html {
            font-family: 'Roboto', sans-serif;
         }
    </style>
  </head>
  <body>
      Hello this is using roboto
      <i class='material-icons'>favorite_border</i>
  </body>
</html>

为什么不用幻影js渲染材质图标？

2 个答案: