IE中的textarea後退

我使用從icomoon.io創建的圖標字體。它有一組有限的與一組Unicode字符關聯的字符集。當這些特定字符輸入到textarea中時，我需要這些圖標來顯示。當任何其他角色輸入時，雖然我希望它回落到Tahoma。我的CSS看起來像這樣。IE中的textarea後退

@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中，我的特殊字符將顯示在我的圖標字體中。它適用於我的文檔以及我的textarea。

在IE中，一切工作原理都是一樣的。 Tahoma中的常規字符，圖標字體中的特殊字符。但是在textarea中，IE正在回落到另一組符號，而不是我的圖標字體。非特殊字符出現在Tahoma。

如果我扭轉字體系列中的字體......

textarea { 
    font-family: icomoon, Tahoma; 
}

現在我的圖標字體顯示出來，但IE回落到比其他的Tahoma不同的字體。

Tahoma只是一個例子，使用通用san-serif做同樣的事情。

這是隻是一個IE錯誤，或者有沒有辦法解決這個問題，或者有什麼我失蹤？

更新我簡化，更並使它的jsfiddle。如果你在Chrome和IE中運行它，你應該看到這個問題。

http://jsfiddle.net/sx7B4/

來源

2013-10-18 thinktt

您測試了哪個版本？ –

謝謝Jukka。正如你指出，這是發生在IE 10中。 – thinktt

作爲你的簡化的例子示出了，這是在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（↕），但宋體確實，我們應該在這兩種情況下的宋體字形。我們在IE的textarea上得到的東西似乎來自MS Gothic或類似的字體。

顯然，IE只使用font-family屬性列表中的第一個現有字體系列名稱textarea，並且對於其中未找到的字符，它使用自己的回退機制。

解決方法：代替textarea，使用div（或其他元素）與contenteditable屬性和（如果textarea是提交一個表單的一部分），該元素的內容複製到以下形式的隱藏字段。（這很複雜，因爲在contenteditable元素中，事情的工作方式不同，例如點擊Enter添加<p>標記。）

來源

2013-10-18 07:19:22

我會嘗試玩contenteditable，也許一些javaScript，看看我能想出。謝謝回覆。 – thinktt

IE中的textarea後退

回答

相關問題