Question

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

您可以在下面的屏幕截图中看到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：哦，我忘了说这个字体是通过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";
}

更新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中会出现此问题。您可以下载字体包here

Answer 1

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

@ font-face和IE9 +输入标签

1 个答案: