javascriptfontscomparisonjspdftruetype

jspdf Tahoma Font rendering different from other PDF

To use the Tahoma font in my PDF I loaded the TTF file from my Windows/Fonts folder into a converter which holds a Base64 string as input to the jsPDF plugin.

Now the results show different from another PDF I try to replace in the old system as depicted below. This is shown at 100% like the new PDF has slightly thicker letters and the spacing varies slightly which shows clearly when comparing the two PDF files

Comparison

enter image description here

enter image description here

jsPDF Code

doc.addFileToVFS( 'Tahoma-normal.ttf', fontBase64Str );
doc.addFont( 'Tahoma-normal.ttf', 'Tahoma', 'normal' );

doc.setFontSize( 7 );
doc.setFont( 'Tahoma' );

doc.text( 'Id.No.', 57, 10 );

What could be the issue or setting I am missing please?

Edit (don't try this at home - Photo of Windows magnifier at 1600 %)

enter image description here

Solution

  • JS.PDF is not changing the shape of a font it is a crisp vectorisation into a PDF. Basically there would normally be no fuzzy edges as we see by zooming in on the download.

    It is the image capture system that pixelates the rendered edges to allow for colour screen anti-aliasing. That is when the red and blue edges become sub-pixel rendered.

    Depending on methods these can be coloured or shades of grey. For every one of 50 screenshots I can expect 50 Shades of Grey.

    Look how the I differs between 1st and 2nd screenshots. The PDF vectors have not altered just the screen shots have.

    If a font is the same TTF then the Glyphs (letters) should be identical when written by the same writer in the same position at the same scale and spacing.

    enter image description here enter image description here enter image description here enter image description here

    Answer

    There is nothing wrong with the programming or jsPDF nor the PDF. It is simply the "Users OS" and Hardware producing the issues. See a related hardware problem at https://superuser.com/questions/1867837/how-to-force-chrome-pdfs-to-use-bgr-or-grayscale-anti-aliasing-in-windows-11

    Where the problem is blue on left and red on right. enter image description here