search

ariya / phantomjs

Scriptable Headless Browser
http://phantomjs.org
BSD 3-Clause "New" or "Revised" License
29.47k stars 5.76k forks source link

Font-face problem #13343

Closed dranouil closed 4 years ago

dranouil commented 9 years ago

Hello,

I've got some problem by using font-face with PhantomJS. I try to take screen capture from html and I've got a different result between the html file and the png file. Have you an idea about this issue ?

Html : screen shot 2015-06-19 at 14 34 36

The PhantomJS result : index xhtml-full

index.xhtml

<html xmlns:epub="http://www.idpf.org/2007/ops" xmlns="http://www.w3.org/1999/xhtml" xmlns:ev="http://www.w3.org/2001/xml-events">
                <head>
                    <title/>
                    <meta name="viewport" content="width=305"/>
                    <link rel="StyleSheet" type="text/css" href="fontface.css"/>
                    <link rel="StyleSheet" type="text/css" href="styles.css"/>
                </head>
                <body><div class="main"><p style="text-align:left;"><span class="cs3">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p></div></body>
            </html>

fontfaces.css

@font-face{
    src: url('AvenirLTStd-Black.ttf');
    font-family: "Avenir LT Std-95";
    font-weight: 900;
    font-style: normal;
}

styles.css

body{
    width: 305px;
    margin: 0;
}
.main{
    padding: 0px 0px 0px 0px;
}
.Aucunstyle{
    padding-top: 0px;
    columns: auto;
    padding-bottom: 0px;
    text-align: left;
    font-weight: 400;
    opacity: 1;
    font-size: 12px;
    word-wrap: break-word;
    font-style: normal;
    color: #000000;
    line-height: 14px;
    margin: 0;
    font-family: 'Minion Pro';
}
.Paragraphestandard{
    padding-top: 0px;
    columns: auto;
    padding-bottom: 0px;
    text-align: left;
    font-weight: 400;
    opacity: 1;
    font-size: 12px;
    word-wrap: break-word;
    font-style: normal;
    color: #000000;
    line-height: 14px;
    margin: 0;
    font-family: 'Minion Pro';
}
.Styledeparagraphe1{
    padding-top: 0px;
    columns: auto;
    padding-bottom: 0px;
    text-align: left;
    font-weight: 400;
    opacity: 1;
    font-size: 24px;
    word-wrap: break-word;
    font-style: normal;
    color: #000000;
    line-height: 29px;
    margin: 0;
    font-family: 'Minion Pro';
}
p{
margin:0;}
.cs1{
    font-size: 60px;
    color: rgba(0,0,0,1); ;
    opacity: 1;
    letter-spacing: 0px;
    font-style: normal;
    font-weight: 400;
    line-height: 72px;
    text-align: left;
    tint: -1;
    word-wrap: break-word;
    font-family: 'Minion Pro';
}
.cs2{
    font-size: 12px;
    color: rgba(0,0,0,1); ;
    opacity: 1;
    letter-spacing: 0px;
    font-style: normal;
    font-weight: 400;
    line-height: 14px;
    text-align: left;
    tint: -1;
    word-wrap: break-word;
    font-family: 'Baskerville';
}
.cs3{
    font-size: 12px;
    color: rgba(0,0,0,1); ;
    opacity: 1;
    letter-spacing: 0px;
    font-style: normal;
    font-weight: 900;
    line-height: 14px;
    text-align: left;
    tint: -1;
    word-wrap: break-word;
    font-family: 'Avenir LT Std-95';
}

screenCapture.js

var args = require('system').args;
var page = require('webpage').create();
var sourcePath;
var destinationPath;
var sizeX;
var canContinu = false;

if(args.length >= 4) {
    sourcePath  = args[1];
    destinationPath = args[2];
    sizeX = args[3];
    canContinu = true;
}

if(canContinu == true) {
    page.viewportSize = { width: sizeX, height: 1};
    page.open(sourcePath, function start(status) {
        page.render(destinationPath);
        phantom.exit();
    });
}
else {
    phantom.exit();
}

And I use this command : 

phantomjs screenCapture.js index.xhtml index.xhtml-full.png 305

This is the folder of the website : screen shot 2015-06-19 at 14 45 45

Configuration : PhantomJS : 2.0.1-development OS : Ubuntu 12.04.5 LTS

mtschoen commented 9 years ago

I've also found this to be the case with some of my custom fonts. My guess is that it's a problem with the underlying renderer doesn't talk to the font library correctly. I'm thinking that perfect font pairity is probably a pipe dream. I would like to figure out the issues with my fonts, too, so any maintainers that can show me where to start in the source would be super helpful.

mapodev commented 9 years ago

Same issue here. Using CentOS 6 and installed Microsoft Truetype and having issues with spacing in bold letters

mapodev commented 9 years ago

Found a solution here: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/45

BrandonSonderegger commented 9 years ago

I'm definitely having this issue on a Windows server, too, trying to use the avenir font. Works like a charm on MacOS. Terrible on Windows.

thitemple commented 7 years ago

I'm having the same problem on Windows. Is there a workaround for this? I see the issue is from 2015 but it's still opened

stale[bot] commented 4 years ago

Due to our very limited maintenance capacity, we need to prioritize our development focus on other tasks. Therefore, this issue will be automatically closed (see #15395 for more details). In the future, if we see the need to attend to this issue again, then it will be reopened. Thank you for your contribution!