问题
I have a problem with a mobile website on Android Gingerbread and versions prior to this. Fonts monospace do not exactly behave as monospaces should: different characters have different widths.
This is how it looks on a Gingerbread default web browser (I also tested on Dolphin and Opera mini):
This is how it looks on a ICS default web browser:
I used the Cultive Mono downloaded from the web.
<link href='http://fonts.googleapis.com/css?family=Cutive+Mono' rel='stylesheet' type='text/css'>
CSS:
#my_id span{font:12px 'Cutive Mono', serif; line-height:1.6}
I also tried the default monospace font from the OS:
#my_id span{font:12px monospace; line-height:1.6}
Does anybody know how can this issue be solved? I really need a monospace working on my mobile website.
Thanks in advance.
edit
This would be an example in jsfiddle: http://jsfiddle.net/HerrSerker/dE94s/9/
回答1:
Found a fix for my case, it's seems that Andorid don't render fonts if one is missing.
this don't work:
font-family: FreeMono, Courier, monospace;
but work if I use:
font-family: FreeMono, Courier, monospace;
font-family: monospace;
In this code probably second rule overwrite the first one.
Just another weird thing with browsers, if anybody explain this or give more details, I'll give him a bounty.
回答2:
This sample works fine on my 2.3.3 (SDK Lvl 10) android emulator:
http://jsfiddle.net/dE94s/3/
CSS
@import url(http://fonts.googleapis.com/css?family=Cutive+Mono);
.cutive_block {
font-family: 'Cutive Mono', Courier, monospace;
}
.monospace_block {
font-family: monospace;
}
HTML
<div>
Some default text
</div>
<div class="cutive_block">
Some text in cutive mono
</div>
<div class="cutive_block">
And a second line that shows it's monospace
</div>
<div class="monospace_block">
Some text in default monospace
</div>
As you can see in the second and third line which uses your custom font is monospaced.
So I guess just use font-family
css attribute with correct fallback font types:
font-family: 'Cutive Mono', Courier, monospace;
as suggested here http://www.w3schools.com/cssref/css_websafe_fonts.asp
回答3:
I realize it may be late, but I was having trouble with Google Fonts and found a workaround: Mononoki and Adobe's Source Code Pro have all characters, including box drawing.
The problem with Google is that some gliphs are missing.
来源:https://stackoverflow.com/questions/17594367/font-monospace-android-2-3