Css IE中的文本区域回退_Css_Internet Explorer_Fonts_Textbox_Fallback

Css IE中的文本区域回退

css internet-explorer fonts

Css IE中的文本区域回退,css,internet-explorer,fonts,textbox,fallback,Css,Internet Explorer,Fonts,Textbox,Fallback,我使用的是从icomoon.io创建的图标字体。它有一个与一组Unicode字符关联的有限字符集。我需要这些图标来显示当这些特定的字符被输入到一个文本区域。当输入任何其他字符时，尽管我希望它回退到Tahoma。我的CSS看起来像这样 @font-face { font-family: 'icomoon'; src:url('fonts/icomoon.eot'); src:url('fonts/icomoon.eot?#iefix') format('embedded-o

我使用的是从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中，我的特殊字符将显示在我的图标字体中。它在我的文档正文和文本区域中工作

身体里的一切都是一样的。Tahoma中的常规字符，图标字体中的特殊字符。然而，在文本区域，IE正在退回到另一组符号，而不是我的图标字体。非特殊角色出现在塔荷马

如果我反转字体系列中的字体

textarea {
    font-family: icomoon, Tahoma;
}

现在我的图标字体出现了，但IE会退回到Tahoma以外的其他字体

顺便说一句，Tahoma只是一个例子，使用通用的san serif做同样的事情

这仅仅是一个IE bug，还是有办法修复这种行为，还是我遗漏了什么

更新我进一步简化并制作了这个JSFiddle。如果你在Chrome和IE上运行它，你应该会看到这个问题

正如您的简化示例所示，这是IE中的一个错误，至少在IE10中，在所有模式下都是如此，并且不依赖于@font-face字体。进一步简化：

<!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>

由于格鲁吉亚不含U+2195↕ 但是Courier New确实如此，在这两种情况下，我们都应该获得Courier New标志符号。我们在IE上的文本区域中看到的似乎是MS哥特式或类似字体

因此，IE显然只使用textarea字体族属性列表中的第一个现有字体族名称，对于在其中找不到的字符，它使用自己的回退机制

解决方法：使用div或具有contenteditable属性的其他元素代替textarea，如果textarea是要提交的表单的一部分，则将该元素的内容复制到表单的隐藏字段中。在contenteditable元素中，情况会有所不同，例如，点击Enter键会添加标记。

您在哪个版本上测试过它？谢谢Jukka。正如你所指出的，这是在IE10中发生的。我将尝试使用contenteditable和一些javaScript，看看我能想出什么。谢谢你的回复。