1

私が取り組んでいるサイトでは、@font-face のレンダリングに 2 つの問題があります。Chrome for Android (Samsung Galaxy S でテスト済み) と Chrome for Win7 の両方です。どちらも最新版。

問題は視覚的に少し異なりますが、同じことに関連していると思います。

ここに、私が話していることをよりよく紹介するためのスクリーンショットをいくつか示します

Android - 適切

iPhone/Android 用の Chrome (ユーザー エージェント) - OK

ここに画像の説明を入力

Android 用 Chrome - 間違い

ここに画像の説明を入力

Ubuntu 用の Chrome - OK

ここに画像の説明を入力

Win7 の Chrome - 間違い

ご覧のとおり、Chrome for Android のフォントは適切にレンダリングされません。使用しているフォント (farnhamdisplay) ではなく、デフォルトのフォントが表示されます。一方、Chrome ユーザー エージェントと Chrome for iPhone ではうまく機能します。

2番目の問題...同じフォント... Windows 7のChromeでのみ上部がカットされています。反対側では、UbuntuのChromeで正常に動作します。

これは、他のブラウザー (Firefox、IE など) でも適切に機能します。

そのための CSS コードの例も次に示します (モバイル版用):

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

#navigation {
    display:inline-block;
    vertical-align:top;
    padding-left:48px;
    font:27px/29px "Farnhamdisplay-regular";
    text-transform:uppercase;
    text-decoration: none;
    margin:18px 0 0 31px;
    color:#333;
    letter-spacing:2px;
}

誰でもこれについて何かアイデアがありますか?私はいくつかの同様の問題に出くわしました.私が理解している限り、それはおそらくChrome側の問題です. たとえば、Google フォントでは機能しますが、一部のカスタム TypeKit フォントなどでは機能しません。

4

0 に答える 0