字体等宽 Android 2.3答案

【问题标题】：Font monospace Android 2.3字体等宽 Android 2.3
【发布时间】：2023-04-03 02:25:02
【问题描述】：

我在使用 Android Gingerbread 和之前版本的移动网站时遇到问题。等宽字体的行为与等宽字体不完全一样：不同的字符具有不同的宽度。

这是它在 Gingerbread 默认网络浏览器上的外观（我也在 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}

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

提前致谢。

编辑

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

【问题讨论】：

除非您花时间准确地解释您所说的“一些小差异会扰乱我需要展示的确切视图”是什么意思——可能包括屏幕截图——任何人都很难帮助你。
嗨@CommonsWare！查看我的编辑版本 =]
我有同样的问题，似乎即使我设置了等宽字体，它也不是等宽字体。您可以查看我正在处理的测试页面：terminal.jcubic.pl/android.html 如果您看一下空间（提示）非常窄，它应该与字母的宽度相同。
@jcubic 查看我的答案，我认为使用正确的字体系列 css 参数将解决您网站上的问题
嗯，我带着完全相同的问题来到这里，吉他图！你见过这种风格的吉他ascii：``` E┌────┬───┬───┬───┬───┐ B├───┼───┼───┼── ─┼───┤ G├───┼───┼b7─┼───┼───┤ D├───┼─3─┼───┼───┼───┤ A ├───┼───┼─1─┼───┼───┤ E└───┴───┴───┴───┴───┘ ```（自然是cmets 里的一切都搞砸了……）

标签： android css font-face android-2.3-gingerbread android-2.2-froyo

【解决方案1】：

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

这不起作用：

font-family: FreeMono, Courier, monospace;

但如果我使用它就可以工作：

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

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

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

【讨论】：

奇怪，似乎 2.3 android 在一个失败时无法正确回退到其他字体系列。我会建议你嵌入你的字体，例如。如果您想要自定义字体，请使用谷歌字体，否则只需使用 monospace 并让系统决定您是否需要移动兼容性。
@for3st 我还没有决定使用来自css-tricks.com/snippets/css/browser-specific-hacks 的Andorid hack 还是只使用font-family: monospace; 也许我只使用等宽。

【解决方案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

【讨论】：

它可以在手机上的 jsFiddle 中使用，但不能在我的网站上使用，我使用过：.terminal, .cmd { font-family: FreeMono, Courier, monospace; 这是我的 css terminal.jcubic.pl/css/jquery.terminal.css

【解决方案3】：

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

Google 的问题在于some gliphs are missing。

【讨论】：