@font-face и входной тег IE9+

Я столкнулся с проблемой, которую я не могу понять. Проблема в том, что я использую пользовательские шрифты на нашем корпоративном сайте, и он отлично работает везде, кроме IE.

Проблему с IE вы можете увидеть на скриншоте ниже: Проблема IE

И вот как это выглядит в Chrome Chrome

Попробую объяснить... Шрифты для ввода и меток одинаковые. Проблема в том, что всё отображается как положено, кроме кириллических глифов в <input/>. Итак, что не так с этим шрифтом? Как я могу вернуть свои кириллические глифы? Я точно знаю, что они присутствуют в шрифте.

Этот шрифт основан на шрифте MyriadPro Light и отредактирован с использованием Glyphs. Вы можете загрузить отредактированный шрифт, чтобы понять его структуру.

UPD: Да, я забыл сказать, что этот шрифт был преобразован для Интернета через 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-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. Вы можете увидеть эффект на изображении ниже:

Проблема IE

Как видите, часть строки на входе написана кириллицей и отображается как «Times New Roman», все остальное отображается, как и ожидалось. Эта проблема возникает в IE8-10 с большинством кириллических шрифтов. Вы можете загрузить пакет шрифтов здесь


person nick.skriabin    schedule 23.07.2013    source источник
comment
Ты про букву М? Остальное мне кажется довольно кириллическим. А как ты изменил шрифт? Использовали ли вы правильные коды символов Unicode?   -  person Mario    schedule 23.07.2013
comment
Да, это кириллица, но шрифт не тот. Видно, скажем, разницу между цифрами и кириллическими буквами. Мои модификации были очень простыми, я просто удалил ненужные глифы. В этом шрифте присутствуют все буквы кириллицы и латиницы.   -  person nick.skriabin    schedule 23.07.2013
comment
И, конечно же, во всех других браузерах шрифт работает нормально.   -  person nick.skriabin    schedule 23.07.2013
comment
Где ваш HTML и CSS?   -  person EricLaw    schedule 23.07.2013
comment
Я не думаю, что проблема в css или html, но она есть, см. UPD2 для макета.   -  person nick.skriabin    schedule 24.07.2013


Ответы (1)


Проблема решена путем использования в качестве исходного формата ttf вместо otf. Теперь настроенный шрифт работает нормально.

person nick.skriabin    schedule 25.07.2013