Font monospace Android 2.3

Question

Android Gingerbread上的移动网站和之前的版本存在问题。字体等宽字体的行为与monospaces不同：不同的字符具有不同的宽度。

这就是它在Gingerbread默认网页浏览器上的外观（我也在Dolphin和Opera mini上测试过）：

这是它在ICS默认网络浏览器上的显示方式：

我使用了从网上下载的Cultive Mono。

<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}

我还尝试了操作系统中的默认等宽字体：

#my_id span{font:12px  monospace; line-height:1.6}

有谁知道如何解决这个问题？我真的需要在我的移动网站上使用monospace。

提前致谢。

修改

这将是jsfiddle的一个例子：http://jsfiddle.net/HerrSerker/dE94s/9/

Answer 1

找到了我的案例的修复程序，似乎Andorid在没有字体的情况下不会渲染字体。

这不起作用：

font-family: FreeMono, Courier, monospace;

但是如果我使用的话可以工作：

font-family: FreeMono, Courier, monospace;
font-family: monospace;

在此代码中，第二条规则可能会覆盖第一条规则。

浏览器只是另一个奇怪的事情，如果有人解释这个或提供更多细节，我会给他一笔赏金。

Answer 2

此示例在我的2.3.3（SDK Lvl 10）android模拟器上正常工作：

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>

正如您在使用自定义字体的第二行和第三行中看到的那样是等宽字体。

所以我想只使用font-family css属性和正确的后备字体类型：

font-family: 'Cutive Mono', Courier, monospace;

正如http://www.w3schools.com/cssref/css_websafe_fonts.asp

所建议的那样

Answer 3

我意识到可能已经晚了，但是我在使用Google字体时遇到了麻烦，并且找到了一种解决方法：Mononoki和Adobe的Source Code Pro具有所有字符，包括方框图。

Google的问题是some gliphs are missing。