0

新しいWebサイト（ http://www.vulytrampolines.com/ ）をリリースしたばかりで、Mac Safari/Chromeでのみフォントフェイスの呼び出しに問題があります。最初の0.5秒ほどで（上部のナビゲーションで）適切なフォントとして読み込まれますが、ビデオがiframe内に読み込まれると、フォントが壊れます。通常よりもはるかに軽く/薄くなり、修正方法がわかりません。

この問題は、ページにyoutube/vimeoビデオへのiframeがある場合にのみ発生するようです。EGhttp ://vulytrampolines.com/aboutus。オレンジ色のナビゲーションを見ると、フォントの重みが少し大きくなりますが、YouTubeビデオが読み込まれると軽くなります。DOMからビデオiframeを削除するか、何も表示しないように設定すると、問題が修正されます。しかし、それを再び見えるようにすると、フォントが再び壊れます。

誰かアイデアはありますか？

webkit-スムージング、フォントスムージング、回転、テキストシャドウはそれを修正していません。

これは私たちのフォントフェイスコールです：

@font-face {
/*    font-family: neuzeitGroteskLight;*/
    font-family: VulyFont-Light;
    src: url(/css/fonts/neuzeitgro-lig-webfont.eot);
    src: url('/css/fonts/neuzeitgro-lig-webfont.eot?#iefix') format('embedded-opentype'),
         url(/css/fonts/neuzeitgro-lig-webfont.woff) format('woff'),
         url(/css/fonts/neuzeitgro-lig-webfont.ttf) format('truetype'),
         url(/css/fonts/neuzeitgro-lig-webfont.svg#NeuzeitGroteskLight) format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant: normal;
}

@font-face {
/*    font-family: 'neuzeitGroteskRegular';*/
    font-family: VulyFont;
    src: url(/css/fonts/neuzeitgro-reg-webfont.eot);
    src: url('/css/fonts/neuzeitgro-reg-webfont.eot?#iefix') format('embedded-opentype'),
         url(/css/fonts/neuzeitgro-reg-webfont.woff) format('woff'),
         url(/css/fonts/neuzeitgro-reg-webfont.ttf) format('truetype'),
         url(/css/fonts/neuzeitgro-reg-webfont.svg#NeuzeitGroteskRegular) format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant: normal;

}

@font-face {
/*    font-family: 'neuzeitGroteskBold';*/
    font-family: VulyFont-Bold;
    src: url(/css/fonts/neuzeitgro-bol-webfont.eot);
    src: url('/css/fonts/neuzeitgro-bol-webfont.eot?#iefix') format('embedded-opentype'),
         url(/css/fonts/neuzeitgro-bol-webfont.woff) format('woff'),
         url(/css/fonts/neuzeitgro-bol-webfont.ttf) format('truetype'),
         url(/css/fonts/neuzeitgro-bol-webfont.svg#NeuzeitGroteskBold) format('svg');
    font-weight: normal;
    font-style: normal;
    font-variant: normal;

}
4

1 に答える 1

0

今日は数時間かけて調査しました。

MacとPCは、この特定のフォントに対して同じフォントファミリ/太さ/スタイルを異なる方法でレンダリングします。

A）MacとPCのFirefoxでは、フォントのレンダリングに問題はありません。

A）PCChromeとPCSafariは、フォントのレンダリングに問題はありません。

B）Mac Chrome、Mac Safari、iPad、およびiPhoneでは、ビデオがページにロードされているか、ページで再生されているときに、フォントのレンダリングに問題があります。

解決：

フォントには、ライトフォントと通常フォントの2つのバージョンがあります。

上記のオプションA）ではVulyFont-Light、フォントが明るくなる問題がないため、現在はを使用しています。

上記のオプションB）では、を使用VulyFontします-webkit-font-smoothing: antialiased !important;（必要に応じて、100％ではありません!important）。フォントスムージングの効果は、ビデオがロードされたとき、または再生を開始したときに、フォントフェースが再レンダリングされたり、明るくなったり壊れたりするのを防ぐことです。したがって、ほぼ同じクロスブラウザ/プラットフォームをレンダリングできます。唯一の違いは、2つのバージョンのフォント間の小さなグリフ間隔です。

于 2012-08-21T05:05:24.580 に答える