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，如果你将它们作为外部字体加载，从第三方网站链接。或者，更好的是，使用https://github.com/typekit/webfontloader来完成为您加载webfonts的繁重工作。

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

Answer 2

因为页眉页脚和内容分开，你需要在每个部分中包含字体。

请按照示例获取标题中的字体结果

在标题处添加：

"<style> "+
                        "@font-face {"+
                        " format('ttf'); "+
                        "font-family: 'Open Sans'; "+
                        "font-style: normal; "+
                        "font-weight: 400; "+
                        "src: url(" + url + "/fonts/Open_Sans/OpenSans-Regular.ttf)  format('truetype');"+
                        "} " +
                "* { font-family: 'Open Sans'; } </style > "

参数url是使用运行phantomjs.exe的路径定义的，并使用以下命令声明它：

url = 'file:///' + fs.absolute('./');

应该在标题中工作，

希望它可以帮助任何人

Answer 3

我花了很多时间来解决类似的问题。我为@font-face定义了各种网址（绝对路径，相对网址，http网址等），但没有任何效果。将所有字体放在~/.fonts目录中，然后在CSS中删除所有@font-face声明并仅使用font-family之后，一切开始工作。它在CentOS Linux发行版上（带有phantomjs-prebuilt模块，版本：2.1.16），但是我认为它也可以在其他版本上使用。

html, body {
    font-family: 'Roboto Condensed', sans-serif;
    zoom: 0.70; /* fix for too large fonts */   
} 

$ ls ~/.fonts/
drwxr-xr-x.  2 root root   4096 06-03 15:16 .
drwxr-xr-x. 10 root root   4096 04-15 13:56 ..
-rw-r--r--.  1 root root  11358 2017-05-26  LICENSE.txt
-rw-r--r--.  1 root root 175888 2017-05-26  RobotoCondensed-BoldItalic.ttf
-rw-r--r--.  1 root root 169800 2017-05-26  RobotoCondensed-Bold.ttf
-rw-r--r--.  1 root root 175188 2017-05-26  RobotoCondensed-Italic.ttf
-rw-r--r--.  1 root root 175380 2017-05-26  RobotoCondensed-LightItalic.ttf
-rw-r--r--.  1 root root 168004 2017-05-26  RobotoCondensed-Light.ttf
-rw-r--r--.  1 root root 170284 2017-05-26  RobotoCondensed-Regular.ttf

PhantomJS字体渲染

3 个答案: