0

私はウェブサイトで@font-faceを使用しています。コードは機能し、Firefox、Chrome、Operaでは@font-faceフォントが完全に読み込まれます。使用されるコードは、FontSquirrelによって生成されたものと同じです。これは@font-faceコードです：

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

}

そして、フォントは次のコードを使用して呼び出されます。

font-family: "OpenSansRegular",Arial,sans-serif;

ただし、IE9でも機能しますが、非常に不格好です。ページが最初に読み込まれるとき、Arialフォントが最初に読み込まれ、約1〜2秒後にOpenSansRegularフォントが読み込まれます。これは明らかに、ページに1つのフォントが読み込まれ、しばらくするともう1つのフォントがページに起動されるため、サイトのエクスペリエンスが損なわれます。

@ font-faceを使用しているときにこれが発生しないようにする方法はありますか？

4

1 に答える 1

1

IE 9 では、data: 属性の使用が完全にサポートされています。この場合、次のように CSS を変更できます。

@font-face {
    font-family: 'OpenSansRegular';
    src: url('data:font/eot;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAggg=='); /* IE 9 */
    font-weight: normal;
    font-style: normal;
}

これにより、CSS が完全にロードされたときにのみ、フォントもロードされます。それが役に立てば幸い。

于 2012-06-06T09:00:12.877 に答える