我遇到了很多我无法理解的问题。问题是我在我们的公司网站上使用自定义字体,它在除 IE 之外的任何地方都可以正常工作。
我将尝试解释...用于输入和标签的字体是相同的。问题是所有东西都按预期显示,除了<input/>
. 那么,这个字体有什么问题呢?我怎样才能找回我的西里尔字符形?我完全知道它们存在于字体中。
此字体基于MyriadPro Light
字体并使用 Glyphs 进行编辑。您可以下载已编辑的字体以了解其结构。
UPD:哦,我忘了说这个字体是通过 2 个不同的转换器(FontSquirrel 和 OnlineFontConverter)为 Web 转换的,没有运气。也许问题出在那些转换器上?因为我认为,这是*.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";
}
UPD 3:再次出现问题
不幸的是,问题仍然存在。现在另一种字体出现了问题:“Futura Round Regular”。我使用使用 fontsquirell 转换的字体。您可以在下图中看到效果:
如您所见,输入中的部分字符串是西里尔字母,显示为“Times New Roman”,其他所有内容均按预期显示。在 IE8-10 中使用大多数西里尔字体时会出现此问题。你可以在这里下载字体包