安卓2.3的等宽字体Monospace

Question

安卓2.3的等宽字体Monospace

androidcssfont-faceandroid-2.3-gingerbreadandroid-2.2-froyo

4

我在Android Gingerbread及其之前的版本中使用移动网站时遇到了问题。等宽字体的表现并不像等宽字体应该表现的那样：不同的字符有不同的宽度。

这是在Gingerbread默认网络浏览器上的呈现效果（我也在Dolphin和Opera mini上测试过）： Gingerbread screenshot

这是在ICS默认网络浏览器上的表现效果： ICS screenshot

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

- user2572758

2

除非您花时间精确地解释“一些小差异搞乱了我需要展示的准确视图”的含义，可能包括屏幕截图，否则任何人都很难帮助您。 - CommonsWare

1

嗨@CommonsWare！看到我的编辑版本了=] - user2572758

我有同样的问题，即使我设置了等宽字体，它似乎也不是等宽的。你可以查看我正在测试的页面：http://terminal.jcubic.pl/android.html 如果你看一下空格（提示），它非常窄，应该和字母的宽度一样。 - jcubic

@jcubic，请查看我的答案，我认为使用正确的字体系列CSS参数将修复您网站上的问题。 - Patrick

哎呀，我也因为吉他图表的问题来到这里！你看过这种吉他ASCII图吗：

E┌───┬───┬───┬───┬───┐ 
B├───┼───┼───┼───┼───┤ 
G├───┼───┼b7─┼───┼───┤ 
D├───┼─3─┼───┼───┼───┤ 
A├───┼───┼─1─┼───┼───┤ 
E└───┴───┴───┴───┴───┘

（当然，在评论区里它看起来很乱……） - null

3个回答

0

这个示例在我的2.3.3（SDK Lvl 10）安卓模拟器上运行良好：

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>

enter image description here

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

因此，我想只需使用正确的回退字体类型和 font-family CSS 属性即可：

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

如此建议 http://www.w3schools.com/cssref/css_websafe_fonts.asp

- Patrick

它在手机上的jsFiddle上可以工作，但在我的网站上不行，我已经使用了：.terminal, .cmd { font-family: FreeMono, Courier, monospace; 这是我的CSS http://terminal.jcubic.pl/css/jquery.terminal.css - jcubic

0

我知道可能有点晚了，但是我在处理谷歌字体时遇到了问题，并找到了解决方法：Mononoki和Adobe的Source Code Pro都包含所有字符，包括方框绘图。

谷歌字体的问题在于有一些字形丢失。

- Jacopo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jcubic · Accepted Answer

我发现了一个解决方案，似乎如果缺少字体，安卓就不会渲染字体。

这种方法不起作用：

font-family: FreeMono, Courier, monospace;

但是如果我使用以下代码，它可以工作：

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

在这段代码中，可能第二个规则会覆盖第一个规则。

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