javascript - 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，作为一个“ headless ”浏览器，与任何其他浏览器相似，因为它只能渲染如上所示的字体，前提是该字体安装在进行渲染的系统上。如果我在访问您的网页时在我的机器上安装了 Roboto，那么我将按预期看到 Roboto。但是，如果我的本地计算机上没有安装 Roboto，它将呈现我的浏览器使用的任何默认后备字体。

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

从 Phantomjs 2.0 开始，phantomjs 能够呈现“websafe”字体。然而，这将再次取决于这些字体是否安装在相关机器上。例如，如果您的网络服务器运行的是 Linux 风格，您可能会遇到问题。这是因为“网络安全”字体实际上是 Microsoft 字体，并且已获得许可供 Windows 和 OSX 等操作系统使用。此类字体不一定安装在其他操作系统中，可能需要手动安装，如所述here .