icomoon.io から作成されたアイコン フォントを使用しています。これには、Unicode 文字のセットに関連付けられた限定された小さな文字セットがあります。これらの特定の文字がテキストエリアに入力されたときにこれらのアイコンを表示する必要があります。Tahomaにフォールバックしたいのですが、他の文字が入力された場合。私のCSSは次のようになります。
@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot');
src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
url('fonts/icomoon.woff') format('woff'),
url('fonts/icomoon.ttf') format('truetype'),
url('fonts/icomoon.svg#icomoon') format('svg');
unicode-range: U+2600-2750;
font-weight: normal;
font-style: normal;
}
body {
font-family: Tahoma, icomoon;
}
textarea {
font-family: Tahoma, icomoon;
}
これは、Chrome と Firefox で正常に動作します。通常の文字は Tahoma で表示され、特殊文字はアイコン フォントで表示されます。ドキュメントの本文とテキストエリアで機能します。
本体のIEでは、すべてが同じように機能します。Tahoma の通常の文字、アイコン フォントの特殊文字。ただし、テキストエリアでは、IE はアイコン フォントではなく別のシンボル セットにフォールバックしています。非特殊文字は Tahoma に表示されます。
フォントファミリのフォントを逆にすると...
textarea {
font-family: icomoon, Tahoma;
}
アイコン フォントが表示されるようになりましたが、IE は Tahoma 以外の別のフォントにフォールバックします。
ちなみに、Tahoma は単なる例であり、一般的なサンセリフを使用しても同じことが起こります。
これは単なる IE のバグですか、それともこの動作を修正する方法はありますか、それとも何か不足していますか?
更新 さらに単純化して、この JSFiddle を作成しました。Chrome で実行してから IE で実行すると、問題が発生するはずです。