How can i make my fonts look sharper?

Haxe
#1

I am trying to get an html5 output.
When i am using the fonts on a brown textured background, the anti-aliasing on the fonts, make them look a bit dull. What can i do to make them look sharp. Or say, remove anti-aliasing ?

#2

More information will help. What font is that? (Is it a bitmap font?)
What size is that?
Are you scaling it? (And you’re not using flixel?)
Are you placing the TextField (Is that a TextField?) on a whole pixel value?
What platform is that? All of the platforms will look subtly different.

http://www.openfl.org/documentation/api/openfl/text/TextField.html

TextField has a few properties you might want to check out.

var sharpness:Float
The sharpness of the glyph edges in this text field. This property applies only if the openfl.text.AntiAliasType property of the text field is set to openfl.text.AntiAliasType.ADVANCED. The range for sharpness is a number from -400 to 400. If you attempt to set sharpness to a value outside that range, Flash sets the property to the nearest value in the range(either -400 or 400).
@default 0

and…

var antiAliasType:AntiAliasType
The type of anti-aliasing used for this text field. Use openfl.text.AntiAliasType constants for this property. You can control this setting only if the font is embedded(with the embedFonts property set to true). The default setting is openfl.text.AntiAliasType.NORMAL. *

To set values for this property, use the following string values:

But first of all, try it at 12pt and place the TextField on a whole value pixel.

#3

Oh…sorry, i think the most important thing i just added in my question, that i forgot to mention is my target is html 5

@Andy, I think, most of the things you said, applies to Flash. I however mainly need for html5, but just for a test, i tried to use myTextfield.type = openfl.text.AntiAliasType.ADVANCED , myTextfield.sharpness = 100 , myTextfield.embedFonts = true. For both the targets, all my text just disappear.

What font is that? (Is it a bitmap font?) ===> Verdana, it’s a ttf file
What size is that? Two sizes I am using 12 and 16 .
Are you scaling it? (And you’re not using flixel?). I have not used anytype of scaling in the project. Nope, it’s simple openfl project.
Are you placing the TextField (Is that a TextField?) on a whole pixel value? Yes it’s a textfield

function setLabel() 
{
    var font = Assets.getFont ("fonts/verdana.ttf");

    var defaultFormat = new TextFormat (font.fontName, 16, 0xffffff, true);
    //label_Tf.antiAliasType = AntiAliasType.ADVANCED ; 
    //label_Tf.sharpness = 100; 
    label_Tf = new TextField();
     label_Tf.defaultTextFormat = defaultFormat;
    label_Tf.x = 20;
    label_Tf.y = 10; 
     label_Tf.width = 180;
    label_Tf.height= 42;
    label_Tf.selectable = false;
    label_Tf.embedFonts = true;
    label_Tf.text = label_Str ;
    container_Sp.addChild(label_Tf);
}
#4

After a little digging through https://github.com/openfl/openfl/

I don’t think embedFonts, sharpness or antiAliasType do anything in non-flash platforms.

That might just be your browser and OS that look like that.
Does it look better if you just write an html file with the same font and bg?

#5

There is little trick to avoid this (if it is happening during resize browser). How I understand - you are using html5-canvas which by default scales the canvas to fit browser size. First that you can do - add template index.html with css that sets your app size exactly in pixels. Otherwise you can listen resize event and then recalculate font size based on new stage width or height and apply this new value to your TextField.

1 Like
#6

That sounds cool. I haven’t used CSS before, so if either of you have done this, some code would be appreciated.

#7

Default index.html has this

<style>
        html,body { margin: 0; padding: 0; height: 100%; overflow: hidden; }
        #openfl-content { background: #000000; width: 100%; height: 100%; }   
</style>

and you need to replace like this

<style>
        html,body { margin: 0; padding: 0; width: 800px; height: 480px; overflow: hidden; }
        #openfl-content { background: #000000; width: 100%; height: 100%; }
 </style>

Note that it loses scale and is need to position app so you should to meet css much close to do this :smile:
Make copy of new html and use template inside app.xml

<template path="your_path_to_new_html" rename="index.html" if="html5" />

Second way:

<window width="0" height="0" if="html5" />

That behavior like Flash NO_SCALE - app fits the full browser size, but each item saves their sizes.

3 Likes
#8

I think, that should not be the issue. Here is what i see in my html source :

#9

…but what is the CSS for “openfl-content”? By default this scales up to 100%

#10

hmm… ok
it is sizing by %

#openfl-content { background: #000000; width: 100%; height: 100%; }

But, anyway, this line from T1mL3arn’s post, worked for me. Fonts are sharper than before. :smile:

< window width=“0” height=“0” if=“html5” />

Thank you all.