私が取り組んでいるサイトでは、@font-face のレンダリングに 2 つの問題があります。Chrome for Android (Samsung Galaxy S でテスト済み) と Chrome for Win7 の両方です。どちらも最新版。
問題は視覚的に少し異なりますが、同じことに関連していると思います。
ここに、私が話していることをよりよく紹介するためのスクリーンショットをいくつか示します
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 フォントなどでは機能しません。