fontscentosphantomjskerning

PhantomJS fonts kerning issue

Certain fonts letter spacing are mostly not symmetric - even have no gaps at all in some cases. The Server is "CentOS Linux release 7.0" (Had an older server version and this version gives better results but still not a good one) phantomjs version is 1.9.8 The html that I use is 

<p><span style="font-family:arial,helvetica,sans-serif;">10px</span></p>

<p><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size: 10px;">ABCDEFGHIJKMLNOPQRSTUVWXYZ</span></span></p>

<p><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size: 10px;">abcdefghijklmnopqrstuvwxyz</span></span></p>

<p>&nbsp;</p>

<p><span style="font-family:arial,helvetica,sans-serif;">12px</span></p>

<p style="line-height: 20.7999992370605px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:12px;">ABCDEFGHIJKMLNOPQRSTUVWXYZ</span></span></p>

<p style="line-height: 20.7999992370605px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:12px;">abcdefghijklmnopqrstuvwxyz</span></span></p>

<p style="line-height: 20.7999992370605px;">&nbsp;</p>

<p style="line-height: 20.7999992370605px;"><span style="font-family:arial,helvetica,sans-serif;">14px</span></p>

<p style="line-height: 20.7999992370605px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:14px;">ABCDEFGHIJKMLNOPQRSTUVWXYZ</span></span></p>

<p style="line-height: 20.7999992370605px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:14px;">abcdefghijklmnopqrstuvwxyz</span></span></p>

<p style="line-height: 20.7999992370605px;">&nbsp;</p>

<p style="line-height: 20.7999992370605px;"><span style="font-family:arial,helvetica,sans-serif;">16px</span></p>

<p style="line-height: 20.7999992370605px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:16px;">ABCDEFGHIJKMLNOPQRSTUVWXYZ</span></span></p>

<p style="line-height: 20.7999992370605px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:16px;">abcdefghijklmnopqrstuvwxyz</span></span></p>

<p style="line-height: 20.7999992370605px;">&nbsp;</p>

<p style="line-height: 20.7999992370605px;"><span style="font-family:arial,helvetica,sans-serif;">18px</span></p>

<p style="line-height: 20.7999992370605px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:18px;">ABCDEFGHIJKMLNOPQRSTUVWXYZ</span></span></p>

<p style="line-height: 20.7999992370605px;"><span style="font-family:arial,helvetica,sans-serif;"><span style="font-size:18px;">abcdefghijklmnopqrstuvwxyz</span></span></p>

I tried to install different fonts on the server manually in many formats - non helped. svg format is not acceptable since it can be copy paste and the file size is too big.

Ariel with highlights

Ariel - highlighted

Ariel without highlights

Ariel

Times without highlights

Times

What are my alternatives ?

Thanks.

Solution

  • Resolved by the following

    1. Compiled phantomjs 2.0.0 (stable release) from source on the machine
    2. Copied the fonts from ubuntu -> /etc/fonts to /etc/fonts