html - @font-Androidブラウザのselectタグに表示されない埋め込みフォント

Question

Webページで@font-faceを使用して埋め込まれたttfフォントを使用しています。

問題は、選択タグにアイテムやオプションを表示するために使用すると、現在選択されているアイテムを除くすべてがAndroidブラウザでぎこちなく表示されることです。Chromeなどのデスクトップブラウザで試してみると、正しく表示されます。

スクリーンショット：

デスクトップChromeで適切に表示されます：

非アクティブな選択がAndroidブラウザに正しく表示されます：

Androidブラウザで選択をクリックするとジブリッシュが表示されます：

フォントを埋め込むために次のCSSを使用しています：

@font-face{
font-family: "MyFont";
src: url('../fonts/MyFont.ttf')  format('truetype');
}

選択タグにフォントを適用するための次のCSSルール：

select{
font-family: MyFont !important;
font-size: 16px;
}

select option{
font-family: MyFont !important;
font-size: 16px;
}

Webページ全体で同じフォントを使用しましたが、selectタグを除くすべての場所で正しく機能しています。どうすればこの問題を解決できますか？

score 1 · Accepted Answer

できません。ブラウザは私が推測する正しいことをしようとしていますが、ネイティブコントロールはデフォルトのシステムフォント以外のフォントを使用していません。

おそらく、これは Android の新しいバージョン、または Android の他のブラウザー (Chrome など) で修正されています。

HTML を使用してコントロールを作成する JS で、独自の選択タグのコピーを作成する必要があります。

http://harvesthq.github.com/chosen/のようなものは必要なことを実行しますが、ネイティブコントロールは通常多くの点で優れているため (この問題以外に!)

1 に答える 1