textarea fallback in IE

icomoon.io에서 만든 아이콘 글꼴을 사용하고 있습니다. Unicode 문자 집합과 관련된 제한된 문자 집합이 있습니다. 이러한 특정 문자가 텍스트 영역에 입력 될 때 표시하려면이 아이콘이 필요합니다. 다른 캐릭터가 입력되면 나는 Tahoma로 폴백 (fallback)하기를 원합니다. 내 CSS는 이렇게 보입니다.textarea fallback in IE

@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는 일반적인 san-serif를 사용하는 것과 같은 방식으로 예를 들었습니다.

이것은 IE 버그입니까?이 문제를 해결할 수있는 방법이 있습니까? 아니면 누락 된 부분이 있습니까?

업데이트 나는이 JSFiddle을 더욱 단순화했다. Chrome에서 실행 한 다음 IE를 실행하면 문제가 표시됩니다. 당신의 간단한 예에서 보듯이

http://jsfiddle.net/sx7B4/

출처

2013-10-18 thinktt

테스트 한 버전은 무엇입니까? –

고마워요. 당신이 지적한대로 IE 10에서 일어난 일입니다. – thinktt

,이 (모든 모드에서 적어도 IE 10) IE의 버그와 @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는 textarea에 대한 font-family 속성 목록의 첫 번째 기존 글꼴 패밀리 이름 만 사용하고 문자에는 찾을 수없는 자체 폴백 (fallback) 메커니즘을 사용합니다.

해결 대신 textarea 중, contenteditable 속성과합니다 (textarea 제출 될 수있는 형태의 일부인 경우) 형태의 숨겨진 필드에 해당 요소의 내용을 복사하여 div (또는 다른 소자)를 사용한다. (contenteditable 요소에서 문제가 발생합니다. 예를 들어 Enter 키를 누르면 <p> 마크 업이 추가됩니다.

출처

2013-10-18 07:19:22

나는 contenteditable과 아마도 javaScript로 놀아 볼 것이고 내가 무엇을 생각해 낼 수 있는지 봅니다. 답장을 보내 주셔서 감사합니다. – thinktt

textarea fallback in IE

답변

관련 문제