背景:内部 Web アプリで、Google フォントの Open Sans を使用しています。フォント ファイルをダウンロードしてアプリにバンドルしています (アプリはオフラインで動作する必要があります)。最近、Google がフォントの新しいバージョンを公開していることに気付き、その時点でそれを再ダウンロードして、アプリで更新しました。この時点で、CSS にフォントを含める方法も変更し、.woff および .woff2 形式のみを使用するようにしました (IE11 と Chrome のみをサポートする必要があります)。
問題:テスト サーバー上の自分のコンピューターでのこの更新以降、IE のみで、すべてのテキストが太字で表示されます。Chromeでは問題ありません。IE で localhost を使用してローカル コピーで表示すると、フォントは正常に動作します。他のコンピューターでは、常に正常に動作します。これまでのところ、同じ問題が発生している他のコンピューターは 1 台しか見たことがありません。
要素を調べると、使用するように正しく設定されてfont-weight: 400おり、IE11 の .woff ファイルを正しく使用しています。通常のフォントではなく太字のフォントを使用しているようです。
私だけの問題ではないことがわかったので、クライアントのコンピューターの多くでこの問題が発生しているのではないかと心配しています。
コード:以下は、フォントをインポートするために使用するコードです。これと以前との唯一の違いは、SVG やその他の形式をインポートしなくなったことです。
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 400;
src: local('Open Sans Regular'), local('OpenSans-Regular'), url(../assets/fonts/OpenSans/OpenSans-Regular.woff2?v=1.5.0) format('woff2'), url(../assets/fonts/OpenSans/OpenSans-Regular.woff?v=1.5.0) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 600;
src: local('Open Sans SemiBold'), local('OpenSans-SemiBold'), url(../assets/fonts/OpenSans/OpenSans-SemiBold.woff2?v=1.5.0) format('woff2'), url(../assets/fonts/OpenSans/OpenSans-SemiBold.woff?v=1.5.0) format('woff');
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 700;
src: local('Open Sans Bold'), local('OpenSans-Bold'), url(../assets/fonts/OpenSans/OpenSans-Bold.woff2?v=1.5.0) format('woff2'), url(../assets/fonts/OpenSans/OpenSans-Bold.woff?v=1.5.0) format('woff');
}
詳細: Web アプリは Angular 5 (Angular CLI を使用)、SASS を使用し、Jenkins を介して Tomcat Windows サーバーにデプロイされます。テスト サーバーは現在、開発モードで実行されています。
ブラウザのすべてのキャッシュをクリアしようとし、コンピュータを数回再起動しましたが、何も解決しません。
残念ながら、アプリは内部専用であるため、リンクできません。
以下は、テスト サーバーで表示した場合と localhost で表示した場合の違いのスクリーンショットです。
これはさまざまな要因の結果である可能性があると思いますので、追加情報を提供する必要がある場合はお知らせください。