PhantomJS 无法渲染字体答案

【问题标题】：PhantomJS can't render fontsPhantomJS 无法渲染字体
【发布时间】：2017-05-17 20:15:22
【问题描述】：

我想渲染一个网站，然后用 FFmpeg 创建视频。

这是目前为止的代码和 phantomjs 命令。

它实际上适用于很多网站，但我想渲染一个 Intranet 网站，我收到如下输出。

这种不正确的渲染可能是什么原因，还是我遗漏了什么？

谢谢。

//编辑 1：我认为问题在于，phantomjs 的字体有问题。使用版本 2.1.1

//编辑2：https://developers.google.com/fonts/同样的问题

//phantomjs capture.js http://www.stackoverflow.com C:/Users/Admin/Desktop/record/ 25

var args = require('system').args;
var url = args[1];
var path = args[2];
var frames = args[3];
var page = require('webpage').create();

page.viewportSize = { width: 640, height: 480 };

page.open(url, function () {
  setTimeout(function() {

    var frame = 0;

    setInterval(function() {
      // Render an image with the frame name
      page.render(path+(frame++)+'.png', { format: "png" });

      if(frame > 25) {
        phantom.exit();
      }
    }, frames);
  }, 666);
});

【问题讨论】：

标签： fonts phantomjs

【解决方案1】：

解决方案：

渲染https://developers.google.com/fonts/ 的问题，或者更确切地说，phantomjs 中渲染功能的常见问题在 phantomjs 2.5.0 beta 中得到部分修复
第一张带有奇怪符号的图片是基于缺少的字体。 Phantom 在没有一套核心字体的 Redhat 上运行。所以我安装了一些TTF。
1. 创建文件夹：/usr/share/fonts/TTF
2. 把你所有的TTF文件放在那里然后运行fc-cache -f -v

【讨论】：

或在任何目录中运行fc-cache -f -v /fonts_dir/

【解决方案2】：

关于日语、中文、印地语或其他特殊字符，我遇到了 phantomjs 和这些特殊字符的字体渲染问题，这就是我解决问题的方法：

下载对应的.ttfUnicode fonts文件。网络上有几个免费网站，但您有几个 Unicode 字体免费文件，用于几个不同的字符映射 here。
将.ttf 文件保存在您的服务器/机器目录/etc/fonts 或目录~/.fonts 中。后者也是unix目录，如果不存在就创建，如果没有root权限则需要（比如共享服务器）
相应地运行fc-cache -fv /etc/fonts 或fc-cache -fv ~/.fonts/。这个fc-cache命令扫描系统上的字体目录，构建字体信息缓存文件

然后在 phantomjs 代码中，对于 文件系统

始终使用 utf-8

var HTMLfile = fs.open(path + file_name, {
    mode: 'r', //read
    charset: 'utf-8' 
});
var content = HTMLfile.read();
HTMLfile.close();

或用于网页

var webPage = require('webpage');
var page = webPage.create();
var settings = {
  operation: "POST",
  encoding: "utf8",
  headers: {
    "Content-Type": "application/json"
  },
  data: JSON.stringify({
    some: "data",
    another: ["custom", "data"]
  })
};

经过长时间的搜索，它对我有用。

【讨论】：