PhantomJS 字体渲染

Question

PhantomJS 可以渲染网页中嵌入的 truetype 字体吗？我的CSS是这样的

@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: normal;
src: local('Roboto-Regular.ttf'), url('Roboto-Regular.ttf') format('truetype');
}

Answer 1

答案是“这取决于”。Phantomjs 作为一个“无头”浏览器，与任何其他浏览器类似，它只能渲染如上所述的字体（如果该字体安装在进行渲染的系统上）。如果我在访问您的网页时在我的计算机上安装了 Roboto，那么我将按预期看到 Roboto。但是，如果我没有在本地计算机上安装 Roboto，它将呈现我的浏览器使用的任何默认后备字体。

Phantomjs 不仅能够渲染 Google 字体，例如 Roboto，如果您将它们加载为外部字体（从第 3 方网站链接）。或者，更好的是，使用https://github.com/typekit/webfontloader它将为您完成加载网络字体的繁重工作。

从 Phantomjs 2.0 开始，phantomjs 能够渲染“网络安全”字体。但是，这又取决于相关计算机上是否安装了这些字体。例如，如果您的网络服务器运行的是 Linux 版本，您可能会遇到问题。这是因为“网络安全”字体实际上是 Microsoft 字体，并且已获得 Windows 和 OSX 等操作系统的使用许可。此类字体不一定安装在其他操作系统中，可能需要手动安装，如此处所述。