javascript PhantomJS 字体渲染
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26363554/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
PhantomJS font rendering
提问by Gokul Chandrasekaran
Can PhantomJS render truetype font that are embedded in the webpage? I have my css like this
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');
}
回答by luvaas
The answer is "it depends". Phantomjs, as a "headless" browser, is similar to any other browser in that it can only render fonts like the above if that font is installed on the system doing the rendering. If I have Roboto installed on my machine when I hit your web page, then I will see Roboto as expected. If, however, I do not have Roboto installed on my local machine, it will render whatever default, fallback font my browser uses.
答案是“视情况而定”。Phantomjs 作为“无头”浏览器，与任何其他浏览器类似，因为它只能在执行渲染的系统上安装该字体时才能渲染上述字体。如果我在访问您的网页时在我的机器上安装了 Roboto，那么我会按预期看到 Roboto。但是，如果我的本地机器上没有安装 Roboto，它将呈现我的浏览器使用的任何默认的后备字体。
Phantomjs is more than capable of rendering Google fonts, like Roboto, if you load them as external fonts, linked from a 3rd party website. Or, better yet, use https://github.com/typekit/webfontloaderwhich will do the heavy lifting of loading webfonts for you.
Phantomjs 不仅能够渲染谷歌字体，比如 Roboto，如果你将它们作为外部字体加载，从 3rd 方网站链接。或者，更好的是，使用https://github.com/typekit/webfontloader它将为您完成加载 webfonts 的繁重工作。
As of Phantomjs 2.0, phantomjs is able to render "websafe" fonts. However, this will again depend upon whether those fonts are installed on the machine in question. If, for example, your webserver is running a flavor of Linux, you may have issues. This is because the "websafe" fonts are actually Microsoft fonts and have been licensed for use by operating systems like Windows and OSX. Such fonts are not necessarily installed in other operating systems and may need to be installed manually, as described here.
从 Phantomjs 2.0 开始，phantomjs 能够渲染“网络安全”字体。但是，这将再次取决于这些字体是否安装在相关机器上。例如，如果您的网络服务器运行的是 Linux 版本，您可能会遇到问题。这是因为“网络安全”字体实际上是 Microsoft 字体，并且已获得 Windows 和 OSX 等操作系统的使用许可。这样的字体不一定安装在其他操作系统和可能需要手动安装，如所描述这里。
回答by hod caspi
because header footer and content are rnedering separate you need to include the fonts in each part.
因为页眉页脚和内容是分开的，所以您需要在每个部分中包含字体。
please follow the example and get the font result in your header
请按照示例并在标题中获取字体结果
add this at the header :
在标题中添加：
"<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 > "
the parameter url is define with the path to phantomjs.exe running, and you declare it with :
参数 url 是使用 phantomjs.exe 运行的路径定义的，您可以使用以下命令声明它：
url = 'file:///' + fs.absolute('./');
should work in header,
应该在标题中工作，
hope it help anyone
希望它可以帮助任何人
回答by marioosh
I spent a lot of time to fix similar problem. I had @font-facedefined with various urls (absolute paths, relative, http url etc), and nothing worked. Everything started working after putting all fonts in ~/.fontsdirectory, removing all @font-facedeclaration in CSS and using only font-family. It was on CentOS Linux distribution (with phantomjs-prebuiltmodule, version: 2.1.16), but i think it will work on other too.
我花了很多时间来解决类似的问题。我已经@font-face定义了各种 url（绝对路径、相对路径、http url 等），但没有任何效果。将所有字体放入~/.fonts目录后，一切都开始工作，删除@font-faceCSS 中的所有声明并仅使用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
