2013-09-16 2 views
0

Раньше я спросил о font-face в IE8 +.Пользовательские шрифты в теге ввода IE9

Теперь я столкнулся с другой проблемой со шрифтами. Вы можете увидеть на скриншоте выше:

IE problem 2 http://f.cl.ly/items/0L2X000n1L3N3K323w2m/Screen%20Shot%202013-09-16%20at%205.16.44%20PM.png

Проблема заключается в том, что шрифт я использовал на входе такой же, как шрифт, используемый для кнопки. Оба элемента используют кириллические символы. Но, как вы видите, кириллица не работает в теге ввода, и она отлично работает на кнопке.

Есть ли какие-либо проблемы с IE9 + с @ font-face и тегом ввода? Я пробовал Google его без везения.

Шрифт, который я использовал, вы можете скачать here. Этот архив включает в себя все типы шрифтов (ttf, eot, woff и svg).

UPD: Пример

CSS:

@font-face { 
    font-family: "LT Round"; 
    src: url(https://dl.dropboxusercontent.com/u/12269325/fonts/LT-Round.eot); 
    src: url(https://dl.dropboxusercontent.com/u/12269325/fonts/LT-Round.eot?#iefix) format("embedded-opentype"), 
     url(https://dl.dropboxusercontent.com/u/12269325/fonts/LT-Round.woff) format("woff"), 
     url(https://dl.dropboxusercontent.com/u/12269325/fonts/LT-Round.ttf) format("truetype"), 
     url(https://dl.dropboxusercontent.com/u/12269325/fonts/LT-Round.svg#a_futuraroundregular) format("svg"); 
    font-weight: normal; 
    font-style: normal; 
} 

body{ 
    padding: 30px; 
} 

p{ 
    font: 16px/normal 'LT Round'; 
    width: 300px; 
    margin: 0 auto; 
    text-align: center; 
    padding-bottom: 20px; 
} 

.bad-font-face{ 
    font: 18px/30px 'LT Round'; 
    border: 1px solid #ccc; 
    padding: 0 30px; 
    height: 30px; 
    width: 200px; 
    text-align: center; 
    display: block; 
    margin: 0 auto; 
} 

HTML:

<p>This is an expample of wrong rendering cyrillic font-face in IE8+</p> 

<input type="text" class="bad-font-face" value="тут будет bad font face"> 

Живая демо on JSFiddle

Спасибо заранее.

+0

В каком режиме документа работает ваша страница (нажмите F12, посмотрите панель инструментов в инструментах разработчика). Есть ли сообщения на вкладке «Консоль» при загрузке вашей страницы? – EricLaw

+0

Я использовал разные режимы (для режима браузера IE10 я использовал стандартный режим, для других - стандарт IEx). В консоли есть только одно сообщение о другом шрифте (ошибка CSS3111 для шрифта MyriadPro), но это не тот случай. В консоли нет сообщений о шрифте из примера (Futura Round). –

+0

Вы видели этот ответ: http://stackoverflow.com/questions/3694060/how-to-make-google-fonts-work-in-ie –

ответ

1

Извините, что являюсь носителем плохих новостей. Это проблема с браузером, а не проблема с CSS или шрифтом.

Если поместить кириллицу текста в p теге этой скрипки, вы можете увидеть со шрифтами кириллицы текста просто отлично (работает с обеими .eot и .woff файлами, поставляемых).

Internet Explorer (по крайней мере, до версии 10) просто отказывается отображать определенные подмножества шрифтов для ввода текста при использовании @font-face.

Я бы также посоветовал использовать фреймворки, такие как cufón, для решения этой проблемы, так как они будут вводить множество проблем с удобством использования при использовании в текстовых полях.

Не так много мы можем сделать по этой проблеме, за исключением использования шрифта по умолчанию для этих полей в Internet Explorer.

+0

Действительно плохая новость ... Спасибо за ответ. –

Смежные вопросы