4

我对 Android Gingerbread 和之前版本的移动网站有疑问。等宽字体的行为与等宽字体不完全一样：不同的字符具有不同的宽度。

这是它在 Gingerbread 默认网络浏览器上的外观（我也在 Dolphin 和 Opera mini 上进行了测试）：

姜饼截图

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

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/

4

3 回答 3

1

为我的情况找到了一个修复程序，如果缺少字体，Andorid 似乎不会呈现字体。

这不起作用：

font-family: FreeMono, Courier, monospace;

但如果我使用：

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

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

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

于 2014-05-25T19:20:49.143 回答
0

此示例在我的 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

于 2014-05-25T18:43:55.837 回答
0

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

Google 的问题是缺少一些字形。

于 2018-10-09T02:03:21.207 回答