0

以前、IE8+の font-faceについて質問しました。

今、フォントに関する別の問題に直面しました。上のスクリーンショットで確認できます。

IEの問題2

問題は、入力に使用したフォントがボタンに使用したフォントと同じであることです。どちらの要素もキリル文字を使用しています。しかし、ご覧のとおり、キリル文字は入力タグでは機能せず、ボタンでは正常に機能します。

@font-face と入力タグに IE9+ 固有の問題はありますか? うまくいかずにグーグルで検索しようとしました。

私が使用したフォントは、こちらからダウンロードできます。このアーカイブには、すべての Web フォント タイプ (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">

JSFiddle でのライブ デモ

前もって感謝します。

4

1 に答える 1