CODEWITHSUNDEEP
javascriptfontsfabricjs
Max P
Max P

Reputation: 1459

fabric.js font render in IE (win 7) & OS X

I try to put text from input fields to canvas. All ok on my work Ubuntu PC. On macbook pro I have a problem with one font named Agatha Modern, but in Windows 7, I have a problem with font Impact.

All fonts use 1px stroke. All fonts are ttf.

The problem with Impact on Windows - artefacts, like a pseudo 3D with long small string. If I scale font to bigger size - all ok, small - artefacts.

In OS X, I have problem since put font on canvas. Problem is - smooth bad stroke =(

What the way to fix this problem? Some fonts (non-standard) work very fine on every devices, but Impact is very important for me on Win7.

Upvotes: 1

Views: 395

Answers (1)

jonashaefele
jonashaefele

Reputation: 71

I had the same problem, try enabling font-smoothing for the canvas in the stylesheet. It made the font-rendering quite a lot nicer for me. 

canvas { 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -moz-font-smoothing:antialiased;
  font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-smooth:always;
}

Upvotes: 3

Related Questions