4

Android Gingerbread およびこれより前のバージョンのモバイル Web サイトに問題があります。モノスペース フォントは、モノスペースのように正確に動作するとは限りません。異なる文字は異なる幅を持ちます。

これは、Gingerbread の既定の Web ブラウザーでどのように表示されるかです (Dolphin と Opera mini でもテストしました)。

ジンジャーブレッドのスクリーンショット

これは、ICS の既定の Web ブラウザーでどのように表示されるかです。

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}

また、OS のデフォルトの等幅フォントも試しました。

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

この問題を解決する方法を知っている人はいますか? モバイル Web サイトで作業するモノスペースが本当に必要です。

前もって感謝します。

編集

これは 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;

このコードでは、おそらく 2 番目のルールが最初のルールを上書きします。

ブラウザに関するもう 1 つの奇妙な点ですが、誰かがこれを説明したり、詳細を教えてくれたりしたら、賞金をあげます。

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

ここに画像の説明を入力

カスタムフォントを使用する2行目と3行目でわかるように、等幅です。

font-familyしたがって、正しいフォールバックフォントタイプで css 属性を使用するだけだと思います:

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

ここで提案されているようにhttp://www.w3schools.com/cssref/css_websafe_fonts.asp

于 2014-05-25T18:43:55.837 に答える