I'm building a banner generation tool to automate our workflow. But I found a problem when rendering fonts(I'll add some screenshot later).
If we use exactly the same font and font-weight, and I'm using a mac so it's a retina screen:
If I look at the text in the design app(no matter it's made in Photoshop, Sketch, or Figma which is a webgl-based design tool), it looks quite sharp (smooth), which is ideal.
If I use html/css to render the font, then the font looks much thicker than in design apps. It makes my text look much busier as Chinese character itself is visually more complicated than English characters. But if I use -webkit-font-smoothing: antialiased, then the rendering of the text is almost the same as design apps, it's quite good as well.
However, I have to use canvas for my tool, as some effects from design apps are poorly supported by html/css, then I found that, it seems the text rendering in canvas is also very thick. And, I haven't found any way like -webkit-font-smoothing: antialiased to completely fix it. The only improvement I could do, is to scale the canvas into something like 3x or even 4x. I indeed found when the canvas scaled to 4x larger, the font becomes thinner, but it's still very far away from the effect of -webkit-font-smoothing: antialiased.
Is there any way could make the canvas text rendering result same as -webkit-font-smoothing: antialiased in html/css??