Question

早些时候我曾在IE8 +中询问过font-face。

现在我遇到了字体的另一个问题。您可以在上面的屏幕截图中看到它：

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

问题是我在输入中使用的字体与用于按钮的字体相同。这两个元素都使用西里尔字符。但正如你所看到的，西里尔字母不起作用在输入标签中，它在按钮上工作正常。

@ font-face和input标签是否存在任何IE9 +特定问题？我试过去谷歌它没有运气。

我用过的字体可以下载here。该档案包括所有网络字体类型（ttf，eot，woff和svg）。

UPD：示例

CSS：

@font-face {
    font-family: "LT Round";
    src: url(https://dl.dropboxusercontent.com/u/12269325/fonts/LT-Round.eot);
    src: url(https://dl.dropboxusercontent.com/u/12269325/fonts/LT-Round.eot?#iefix) format("embedded-opentype"),
         url(https://dl.dropboxusercontent.com/u/12269325/fonts/LT-Round.woff) format("woff"),
         url(https://dl.dropboxusercontent.com/u/12269325/fonts/LT-Round.ttf) format("truetype"),
         url(https://dl.dropboxusercontent.com/u/12269325/fonts/LT-Round.svg#a_futuraroundregular) format("svg");
    font-weight: normal;
    font-style: normal;
}

body{
    padding: 30px;
}

p{
    font: 16px/normal 'LT Round';
    width: 300px;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 20px;
}

.bad-font-face{
    font: 18px/30px 'LT Round';
    border: 1px solid #ccc;
    padding: 0 30px;
    height: 30px;
    width: 200px;
    text-align: center;
    display: block;
    margin: 0 auto;
}

HTML：

<p>This is an expample of wrong rendering cyrillic font-face in IE8+</p>

<input type="text" class="bad-font-face" value="тут будет bad font face">

现场演示on JSFiddle

提前致谢。

Answer 1

很抱歉成为坏消息的承担者。这是一个浏览器问题 - 不是CSS或字体文件问题。

如果您将西里尔文本放在该小提琴的p标记中，您可以看到字体呈现西里尔文正常（适用于您提供的.eot和.woff文件）

Internet Explorer（至少版本10）在使用@font-face时拒绝为文本输入呈现某些字体子集。

我还建议不要使用像cufón这样的框架来解决这个问题，因为在文本字段上使用时会引入很多可用性问题。

除了在Internet Explorer中对这些字段使用默认字体外，我们无法解决此问题。

IE9输入标签中的自定义字体

1 个答案: