@font-face и IE9+ тег ввода
У меня проблемы, которые я не могу понять. Проблема в том, что я использую пользовательские шрифты на нашем корпоративном сайте, и он отлично работает везде, кроме IE.
Проблема с IE вы можете увидеть на скриншоте ниже: http://f.cl.ly/items/0k1T0R2u2i2L1C3L3u0o/Screen%20Shot%202013-07-23%20at%205.23.36%20PM.png
И вот как это выглядит в Chrome http://f.cl.ly/items/3n022Q2a212V2T0m3Q0B/Screen%20Shot%202013-07-24%20at%2010.57.27%20AM.png
Я постараюсь объяснить... Шрифты, используемые для ввода и метки одинаковы. Проблема в том, что все вещи отображаются так, как ожидалось, кроме символов кириллицы в <input/>
, Итак, что не так с этим шрифтом? Как я могу вернуть свои кириллические глифы? Я точно знаю, что они присутствуют в шрифте.
Этот шрифт основан на MyriadPro Light
шрифт и редактируется с помощью символов. Вы можете скачать отредактированный шрифт, чтобы понять его структуру.
UPD: О, я забыл сказать, что этот шрифт был конвертирован для Web через 2 разных конвертера (FontSquirrel и OnlineFontConverter), не повезло. Может быть, проблема с этими конвертерами? Потому что я думаю, что это проблема *.woff
формат. Скажем, IE10 использует *.woff
файлы для @font-face
;
UPD2: часть макета (html + css):
Html
<li class="f_name_wrapper aligned_left string input required stringish" id="order_tourists_attributes_0_name_input">
<label class=" label" for="order_tourists_attributes_0_name">
Имя по паспорту
</label>
<input class="input_text f_name" data-validator_string_ru="Заполняйте это поле как в заграничном паспорте" id="order_tourists_attributes_0_name" maxlength="30" name="order[tourists_attributes][0][name]" placeholder="Sherlock" type="text" validator="not_empty string_en">
</li>
Font-лица:
@font-face {
font-family: "LT-Light";
src: url(/assets/LTLight-Regular.otf.eot);
src: url(/assets/LTLight-Regular.otf.eot?#iefix) format("embedded-opentype"),
url(/assets/LTLight-Regular.otf.woff) format("woff"),
url(/assets/LTLight-Regular.otf.ttf) format("truetype"),
url(/assets/LTLight-Regular.otf.svg#LTLightRegular) format("svg");
font-weight: normal;
font-style: normal;
}
CSS
#checkout_page .order_form .tourist ol li label {
font: 12px/12px "LT-Light";
text-transform: uppercase;
display: block;
padding: 0 5px 3px;
}
#checkout_page .order_form .tourist ol li input {
margin: 0;
padding: 0 10px;
border: 1px solid #B7B7B7;
border-radius: 3px;
height: 37px;
font: 18px/normal "LT-Light";
}
UPD 3: проблема снова
К сожалению, проблема все еще здесь. Теперь есть проблема с другим шрифтом: "Futura Round Regular". Я использую шрифт, преобразованный с помощью fontsquirell. Вы можете увидеть эффект на изображении ниже:
http://f.cl.ly/items/0L2X000n1L3N3K323w2m/Screen%20Shot%202013-09-16%20at%205.16.44%20PM.png
Как вы можете видеть, часть строки во входных данных является кириллической, и она отображалась как "Times New Roman", а все остальное отображалось как ожидалось. Эта проблема возникает в IE8-10 с большинством кириллических шрифтов. Вы можете скачать пакет шрифтов здесь
1 ответ
Проблема решена с использованием в качестве источника ttf
вместо otf
формат. Теперь настроенный шрифт работает отлично.