1

AndroidフォンのChromeブラウザで、 http://dev.belugalab.com/btmのロゴの下にある 3 つの単語が正しくレンダリングされません。ただし、同じフォントがフッターで機能しているようです。これがfont-faceに関連しているかどうかはわかりませんが、それが私の最善の推測です。これは、 Android Chromeで何が起こっているかのスクリーンショットです: http://imm.io/MgE0@font-face

CSS:

@font-face {
    font-family:'intro_regular';
    src: url('fonts/intro-webfont.eot');
    src: url('fonts/fonts/intro-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/intro-webfont.woff') format('woff'),
         url('fonts/intro-webfont.ttf') format('truetype'),
         url('fonts/intro-webfont.svg#intro_regular') format('svg');
    font-weight: normal;
    font-style: normal
}

h2 {
    font-family:'intro_regular';
    font-size:31px;
    font-weight:400;
    color:#fff;
    background:#000;
    display:inline-block;
    height:30px;
    margin:3px 0 4px 39px;
    line-height:30px;
    padding:0 4px
}
4

2 に答える 2

0

Chrome for iOS で正しくレンダリングされます。私はそれを見るためのAndroidデバイスを持っていませんが、H2の行の高さと高さをフォントサイズと同じかそれ以上にしてみてください。現在、フォント サイズより 1 ピクセル短くなっています。

于 2012-11-20T03:56:08.857 に答える
0

私は Android フォンを持っていませんが、スクリーン ショットを見ると、h2 には同じフォントがないように見えます。Chrome (Mac) でページを開き、(開発者ツールで) "font-family" のチェックを外すと、スクリーンショットにかなり近くなります。タグを削除しline-heightてテキストのサイズを少し大きくすると、Android のスクリーンショットのようになります。

と を削除してheight、line-heightを調整して、padding必要なものに近づけます。これにより、少なくともテキストが途切れるのを防ぐことができます。

'intro_regular'フォントに問題があると思います。おそらく、Android Chrome はデスクトップとは異なるフォント形式を使用していますか? おそらくSVG？

私が最初に疑ったのは、別の CSS ルールが Android では別の CSS ルールをオーバーライドしているが、デスクトップではそうではないということでした。しかし、それを行う他のルールは見つかりませんでした。

Android Chrome のキャッシュをクリアしてみましたか?

于 2012-11-20T04:43:16.770 に答える