I am using a custom .ttf font in my android app. I load it the usual way:
myTypeface = Typeface.createFromAsset( getAssets(), "myTypeface.ttf");
then I assign my typeface within my activity... pretty straightforward stuff:
TextView tv = (TextView) findViewById(R.id.sample_text); tv.setTextSize(12); tv.setTypeface(App.myTypeface);
The problem I'm running into is that on some devices using later APIs (I've specifically noticed it in an emulator for the Asus Transformer), the text looks slightly bolder, less uniform in width, and more jumbled in vertical alignment. By that last part I mean that some characters are placed vertically a bit higher or lower than others, giving a little bit of a roller-coaster feel to the text.
Consider the screen shots below
This is text rendered on an emulator with the same resolution and dpi as a Transformer, but using Google API level 8.
Looks pretty standard, right?
Now consider the text rendered in an emulator with the same resolution and dpi, but using Google API level 15:
At first the text may look similar, though you might notice it seems a bit bolder. However, look at the "c" in "quick". You will notice that it sits lower, and is taller, than the "c" in the first rendering. You will also notice that if you look at the bottom of the characters in the word "quick", they are not aligned on the bottom.
These issues may seem small, but on screens with lots of text, it starts to look really unprofessional.
Anybody seen this, or have an explanation? I'd love to make the text look uniform in later APIs.
Thanks so much for your time!
Android 8.0 (API level 26) introduces a new feature, Fonts in XML, which lets you use fonts as resources. You can add the font file in the res/font/ folder to bundle fonts as resources. These fonts are compiled in your R file and are automatically available in Android Studio.
Fonts are compiled in R file and are automatically available in the system as a resource. You can then access these fonts with the help of the font resource type.
The process of transforming font outlines into pixels is called rasterization. The operating system's text-rendering engine places the outline (ie the shape) of each character at the desired font size on a pixel grid. Next, it colours all the pixels whose centre is inside the outline (see image below).
Okay, so it seems to have just the following flags applied in both instances:
Paint.DEV_KERN_TEXT_FLAG Paint.ANTI_ALIAS_FLAG
Try doing this, and see if the results are any different (not necessarily improved, but even noticeable at all):
textView.setPaintFlags(textView.getPaintFlags() | Paint.SUBPIXEL_TEXT_FLAG);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With