Text rendering looks bad at small font sizes

[uniquejack]

I've been playing around with EAWebkit and I can't manage to make the font look nice at small font sizes (font-size: 12px;). Here's an example:

I've tried to compile EAWebkit by myself from ychin mirror to make sure that EAText was usingFreetype, but I had the same result: not only I'm having strange issues with latin characters but also the font looks pretty bad as you can see, why?

[bholcomb]

Can you post a picture of how this looks in an actual web browser for comparison?

Your picture doesn't look too bad, but it could be an openGL sampling issue when we draw the webkit texture to screen. If that's the case, then maybe we should be mipmapping the output of webkit and using different texture sampling parameters. In the function initScreenQuad(), we might want to set the texture sampling parameters to GL_LINEAR_MIPMAP_LINEAR, and then in the updateGLTexture() function we should add a glGenerateMipmap() call after uploading the pixel data.

[uniquejack]

Yeah sure, here some comparisions: BeamNG EAWebkit Demo:

Google Chrome:

glWebkit:

html files: sampleCode.zip

[bholcomb]

You seem to be getting different fonts between glWebkit and beamNG/chrome. On glWebkit, it looks like you're getting times new roman since thats the only font that the example loads by default. You'll either need to manually load other fonts, or use CSS @font-face to load the fonts for your webpage.

@font-face {
  font-family: 'Roboto';
  src: url('Roboto-Regular.ttf') format('truetype');
}
  
* {
  font-family: Roboto;
}
</style>

Let me know if that helps.

Cheers,

Bob