-->

@font-face and IE9+ input tag

2019-08-14 19:04发布

问题:

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: IE problem http://f.cl.ly/items/0k1T0R2u2i2L1C3L3u0o/Screen%20Shot%202013-07-23%20at%205.23.36%20PM.png

And there is how it looks in chrome Chrome http://f.cl.ly/items/3n022Q2a212V2T0m3Q0B/Screen%20Shot%202013-07-24%20at%2010.57.27%20AM.png

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:

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

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.