1

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

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

textarea {
    font-family: icomoon, Tahoma;
}

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

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

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

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

http://jsfiddle.net/sx7B4/

4

1 回答 1

0

正如您的简化示例所示，这是 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 或一些类似的字体。

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

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

于 2013-10-18T07:19:22.720 回答