@font-face and IE9+ input tag

问题

I've stacked with problem which i can't understand. Trouble is that i use custom fonts on our corporate site and it works fine everywhere except IE.

Problem with IE you can see on a screenshot below:

And there is how it looks in chrome

I'll try to explain... Fonts used for inputs and labels are the same. The problem is that all stuff displaying as expected except cyrillic glyphs in <input/>. So, what's wrong with this font? How can i get back my cyrillic glyphs? I exactly know that they are present in the font.

This font based on MyriadPro Light font and edited using Glyphs. You can download edited font to understand its structure.

UPD: Oh, i've forgot to say that this font was converted for Web through 2 different converters (FontSquirrel and OnlineFontConverter), no luck. Maybe the problem is with those converters? Because i think, that this is problem of *.woff format. Say, IE10 uses *.woff files for @font-face;

UPD2: Part of layout (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-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: Problem again

Unfortunately problem is still here. Now there's trouble with another font: "Futura Round Regular". I use font converted using fontsquirell. You can see the effect on image below:

As you can see, part of string in input is cyrillic and it was displayed as 'Times New Roman', everything else displaying as expected. This problem occurs in IE8-10 with most cyrillic fonts. You can download fonts pack here

回答1:

Problem solved by using as source ttf instead of otf format. Now customized font works fine.

来源：https://stackoverflow.com/questions/17811919/font-face-and-ie9-input-tag

标签

internet-explorer

fonts

font-face

glyph