سؤال

I'm using a icon font created from icomoon.io. It has a small limited set of characters that are associated with a set of Unicode characters. I need these icons to display when those specific characters are input into a textarea. When any other character is input though I want it to fallback to Tahoma. My CSS looks like this. 

@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;
}

This works fine in Chrome and Firefox. Regular characters show up in Tahoma and my special characters will show up in my icon font. It works in the body of my document and also in my textarea.

In IE in the body everything works the same. Regular characters in Tahoma, special characters in icon font. In the textarea however IE is falling back to another set of symbols instead of my icon font. The non-special characters show up in Tahoma.

If I reverse the fonts in the font family...

textarea {
    font-family: icomoon, Tahoma;
}

Now my icon font shows up but IE falls back to a different font other than Tahoma.

Tahoma is just an example by the way, using generic san-serif does the same thing.

Is this just a IE bug or is there a way to fix this behavior, or is there something I'm missing?

Update I simplified even more and made this JSFiddle. If you run it in Chrome and then IE you should see the issue.

http://jsfiddle.net/sx7B4/

هل كانت مفيدة؟

المحلول

As your simplified example shows, this is a bug in IE (at least in IE 10 in all modes) and does not depend on @font-face fonts. A further simplification:

<!DOCTYPE html>
<title>textarea fallback in IE</title>
<style>
body { 
  font-family: Georgia, Courier New; }
textarea { 
  font-size: 100%;
  font-family: Georgia, Courier New; }
</style>
Hello world &#x2195;<br>
<textarea>Hello world &#x2195;</textarea>

Since Georgia does not contain U+2195 (↕) but Courier New does, we should get the Courier New glyph in both cases. What we get instead in the textarea on IE seems to be from MS Gothic or some similar font.

So apparently IE uses only the first existing font family name in the font-family property list for textarea, and for characters not found in it, it uses its own fallback mechanism.

Workaround: instead of textarea, use div (or other element) with the contenteditable attribute and (if the textarea is part of a form to be submitted) copy the content of that element into a hidden field of the form. (This is complicated by the problem that in a contenteditable element, things work differently, e.g. hitting Enter adds <p> markup.)

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top