字体等宽Android 2.3

Question

我有一个问题的手机网站上的Android姜饼和之前的版本。等宽字体并不完全像等宽字体那样:不同的字符具有不同的宽度。

这是它在姜饼默认网络浏览器上的样子(我也在Dolphin和Opera mini上测试过)：

​

​

这是它在ICS默认web浏览器上的外观：

​

​

我使用了从网上下载的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}

有人知道如何解决这个问题吗？我真的需要一个单一空间在我的移动网站上工作。

提前谢谢。

编辑

这将是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

我意识到现在可能已经晚了，但我在使用谷歌字体时遇到了麻烦，于是找到了一个解决办法：Mononoki和奥多比的Source Code Pro都有所有的字符，包括方框图。

谷歌的问题在于some gliphs are missing。