In my project I am using TTF fonts and in other engines it is usually crystal clear with sharp edges while in Cocos Creator the font looks very pixelated and washed in the editor and also during preview in web browser, also certain letters in the text seems to be cut off on the sides.
I can not find any option in properties to tweak this.
I also noticed many people reported similar problems with TTF fonts in the past with older versions of Cocos2D but received no solution.
is there any solution to this in Cocos Creator?
If there is no solution to this right now, is there any solution planned for upcoming versions?
Yes I tried, it is put a white box around my text and doesn’t solve the original problem of being pixelated and cutting ogg sides of letters.
I tried to tweak all properties.
This is the font I am using in case someone would like to investigate: Lobster-Regular.zip (147.2 KB)
It seems like the fonts rendered low res and smoothed but I can’t really find any property to control anything like this. I did find topics where people was suggesting for similar problems to edit the font file and add some space around each letter, but I don’t feel like editing the font because it is works everywhere in all my projects as-is. Instead I`ll consider having text also as an image maybe. I don’t need any dynamic text in my project anyway just titles, buttons, dialogs…etc
Solved the problem of the low resolution by setting the line height and font size higher like 200-300. This way I get a much better render:
But still not as clean as the one above and if you look carefully you can see, it is still cut the sides of the letters a little. Also in case of a button, due to the line height and size settings, the text is not centered but shifted to the bottom of the button even if I set it to be centered.
I had faced this issue quite a while back.
From what i remember , after seeing ur hack to make it work ie increasing the font size to huge number and scaling down the node, thats exactly what i did at the time.
I think this issue is dominant in projects having low design resolution set on canvas.
If you increase the canvas size, this issue keeps on minimising.
Managed to solved the problem even on small canvas size.
Need to set the cache mode to CHAR
Overflow to SHRINK
Line Height to 200
Font size to 260 (higher than this may cause a crash)
Label size to 100 (actual font size 23)
the result is crystal clear font, no pixels, smooth edges. perfect:
