Question

我正在使用从icomoon.io创建的图标字体。它有一小组与一组Unicode字符相关联的有限字符。当这些特定字符输入到textarea时，我需要显示这些图标。当输入任何其他角色时，我希望它回退到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/

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

由于格鲁吉亚不包含U + 2195（↕）但Courier New不包含，我们应该在两种情况下获得Courier New字形。我们在IE上的textarea中获得的似乎是来自MS Gothic或类似的字体。

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

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

IE中的textarea后备

1 个答案: