現象
複数のページにおいて、同じ font-family 名で、異なる Embedded Open Type (.eot) フォントのサブセットを定義したとします。
例えば以下のように Page1.html と Page2.html がそれぞれ 'テスト フォント' を定義していますが、page1.eot と page2.eot は異なる文字のフォント サブセットを含めている別々のフォントファイルです。
Page1.html
@font-face {
font-family: 'テスト フォント';
src: url('./page1.eot');
}
Page2.html
@font-face {
font-family: 'テスト フォント';
src: url('./page2.eot');
}
Internete Explorer を使用してこれらのページ間で複数回遷移した後に、ページのフォントを正しく表示できない場合があります。その際に F5 などでページをリフレッシュすると、正常に表示されます。
原因
IE は .eot ファイルを内部でキャッシュとして持っています。同じ font-family 名を使用したページ間で頻繁に遷移すると、キャッシュされた .eot 情報とその該当 .eot を使用したページを正しく区別できず、別のページの .eot ファイルでページを表示する場合があります。
なお、別のページの .eot ファイルに異なる文字のフォント サブセットを含まれているため、ページ上に .eot ファイルに含まれていない文字は IE の既定のフォントで表示されることになります。この場合、IE ではページ上の全ての文字を定義されたフォントで表示できません。
解決方法
この問題を解決するためには、ページの font-family の定義で、.eot ファイルが異なれば、異なる font-family 名を定義します。
回避策
IE9 以後ではこの現象は発生しません。IE9 以後のバージョンを利用します。
状況
マイクロソフトでは、この問題をこの資料の対象製品として記載されているマイクロソフト製品の問題として認識しています。
