@ font-face和IE9 +输入标签 [英] @font-face and IE9+ input tag

问题描述

我已经堆积了一些我无法理解的问题。
麻烦的是，我在我们的公司网站上使用自定义字体，除了IE之外，它在
以外的地方工作正常。

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.

你可以在IE上看到IE的问题截图如下：
IE问题http://f.cl.ly/items/0k1T0R2u2i2L1C3L3u0o/Screen%20Shot%202013-07-23%20at%205.23.36%20PM.png

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

它的外观如何在镀铬
Chrome http://f.cl.ly/items/3n022Q2a212V2T0m3Q0B/Screen%20Shot%202013-07 -24％20at％2010.57.27％20 AM.png

我将尝试解释...用于输入和标签的字体是相同的。问题是
所有东西都按预期显示，除了< input /> 中的西里尔字形。那么，
这个字体有什么问题？我怎样才能找回我的西里尔字形？我确切地知道他们在字体中存在
。

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.

此字体基于 MyriadPro Light 字体并使用字形进行编辑。
您可以下载已编辑的字体以了解其结构。

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

UPD：哦，我忘了说这个字体是通过2个不同的
转换器（FontSquirrel和OnlineFontConverter）转换为Web的，没有运气。也许这些转换器存在问题？因为我认为，这是 *。woff 格式的问题。比如，IE10使用 *。woff
文件 @ font-face ;

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：
部分布局（html + css）：

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-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转换字体。您可以在下面看到对图像的影响：

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问题http://f.cl.ly/items/0L2X000n1L3N3K323w2m/Screen%20Shot%202013-09 -16％20at％205.16.44％20 PM.png

正如您所看到的，输入中的部分字符串是西里尔字母，它显示为时代 New Roman'，
其他所有内容都按预期显示。在大多数西里尔字体的IE8-10中会出现此问题。您可以下载字体包此处

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

推荐答案

使用as ttf 代替 otf 格式解决了问题。
现在自定义字体工作正常。

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

这篇关于@ font-face和IE9 +输入标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！