@ font-face и IE9 + тег ввода

У меня сложены проблемы, которые я не могу понять. Проблема в том, что я использую пользовательские шрифты на нашем корпоративном сайте, и он отлично работает везде , за исключением IE.@ font-face и IE9 + тег ввода

Проблема с IE вы можете увидеть на скриншоте ниже: IE problem 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 и отредактирован с использованием символов. Вы можете: download отредактированный шрифт для понимания его структуры.

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. Вы можете увидеть эффект на изображении ниже:

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

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

источник

2013-07-23 nicholas_r

Вы говорите о «М»? Остальное выглядит для меня кириллицей. Также как вы изменили шрифт? Вы использовали правильные коды символов в Юникоде? – Mario

Да, это кириллица, но семья шрифтов неверна. Вы можете видеть, скажем, разницу между числами и кириллическими буквами. Мои изменения были очень простыми, я только что удалил ненужные глифы.Все кириллические и латинские буквы присутствуют в этом шрифте. –

И, конечно же, во всех других браузерах шрифт работает нормально. –

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

источник

2013-07-25 22:41:22

@ font-face и IE9 + тег ввода

ответ

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