IE中的textarea后备答案

【问题标题】：textarea fallback in IEIE中的textarea后备
【发布时间】：2013-10-24 02:17:02
【问题描述】：

我正在使用从 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 的 body 中，一切都是一样的。 Tahoma 中的常规字符，图标字体中的特殊字符。然而，在 textarea 中，IE 正在回退到另一组符号而不是我的图标字体。非特殊字符出现在 Tahoma 中。

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

textarea {
    font-family: icomoon, Tahoma;
}

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

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

这只是一个 IE 错误还是有办法修复此行为，或者我缺少什么？

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

http://jsfiddle.net/sx7B4/

【问题讨论】：

你在哪个版本上测试过这个？
谢谢尤卡。正如您所指出的，这发生在 IE 10 中。

标签： css internet-explorer fonts textbox fallback

【解决方案1】：

正如您的简化示例所示，这是 IE 中的错误（至少在所有模式下的 IE 10 中）并且不依赖于@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>

由于 Georgia 不包含 U+2195 (↕) 但 Courier New 包含，因此我们应该在这两种情况下都获得 Courier New 字形。我们在 IE 上的 textarea 中得到的似乎是 MS Gothic 或类似字体。

显然 IE 仅使用 font-family 属性列表中的第一个现有字体系列名称为 textarea，对于其中未找到的字符，它使用自己的后备机制。

解决方法：使用带有contenteditable 属性的div（或其他元素）代替textarea，并且（如果textarea 是要提交的表单的一部分）将该元素的内容复制到表单的隐藏字段。（由于在 contenteditable 元素中，事情的工作方式不同，例如按 Enter 会添加 <p> 标记，这一问题变得复杂。）

【讨论】：

我会尝试使用 contenteditable 和一些 javaScript，看看我能想出什么。感谢您的回复。