Chrome SVGウェブフォント選択入力の奇妙な文字

Question

Windows 8のChrome 26.0.1410.64mには、Webフォントのレンダリングに問題があります。これは既知の問題であり、解決策は、最初にwoffバージョンの代わりにフォントのsvgバージョンを提供することです。これは、アンチエイリアスを修正し、フォントを再びきれいに見せます。

この方法の欠点は、選択入力内のエレメント内の奇妙なレンダリングです。

私は実際にそれを見るためにjsfiddleを追加しました：http://jsfiddle.net/4mSpv/6/。

CSSはできるだけ簡単です。

フォントのローカルインストールを削除し、同じことを行う他のWindows 7コンピュータに気付きました。誰でも何が起こっているのかを知っていますか？ （IE、Firefoxの、サファリは、すべての罰金レンダリング）

PS：他のブラウザでは、問題をフィルタリングするJSFiddleに含まれていないフォントと各ブラウザが自分の癖（許可しないフォントサイズなど）を持っているが、レンダリングテキストの細かい

Answer 1

この問題を解決する方法はありません。

これは回帰の問題ではなく、M24の既存の問題です。

私はWeird character rendering in option menu

Answer 2

をバグレポートを提出し、それautomaticooが述べたように、それはクロムの既知の問題です。ただし、この記事の回答の中に記載されているテクニック（Google Webfonts Render Choppy in Chrome on Windows）を使用して回避することができます。

@media screen and (-webkit-min-device-pixel-ratio:0) { 
    select { 
    font-family: Arial; /* standard font */ 
    } 
} 

こうすれば、まだ動作しているブラウザにはどんなフォントでも使用でき、Chrome用の汎用HTMLフォントに置き換えることができます。

Answer 3

私は実際にこれに対する答えを探していましたが、私はこの質問に遭遇しました。私はこのバグが今日も残っていることに気が付きました（私はちょうどそれに会いました。今私はsvgフォントを@ font-face宣言の最後に置く1つの解決策しか見つけませんでした（これは他のすべての形式をも意味します）。唯一の問題は、あなたがフォントレンダリングを修正しようと試みるとき（それがすべて滑らかでものにするために）、あなたは実際に最初にsvgを置くだろうということです。 はここでそれを

1を証明するためにいくつかの例です：あなたが見ることができるようにSVGフォントを最後に、何のさわやかなフォントは、オプションは、だから、右の選択ボックスでオプションを

@font-face { 
font-family: 'OpenSansLight'; 
src: url('../font/OpenSans-Light-webfont.eot'); 
src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../font/OpenSans-Light-webfont.woff') format('woff'), 
    url('../font/OpenSans-Light-webfont.ttf') format('truetype'), 
    url('../font/OpenSans-Light-webfont.svg#open_sanslight') format('svg'); 
font-weight: normal; 
font-style: normal; } 

を表示されません表示はちょうど良いですが、実際にはフォントは実際にはそうではなく、ちょうど "登録"を見てください（私の2番目の例と比較してこれが良く分かるかもしれません）

2：SVGのフォント、

@font-face { 
font-family: 'OpenSansLight'; 
src: url('../font/OpenSans-Light-webfont.eot'); 
src: url('../font/OpenSans-Light-webfont.eot?#iefix') format('embedded-opentype'), 
    url('../font/OpenSans-Light-webfont.svg#open_sanslight') format('svg'), 
    url('../font/OpenSans-Light-webfont.woff') format('woff'), 
    url('../font/OpenSans-Light-webfont.ttf') format('truetype'); 
font-weight: normal; 
font-style: normal; } 

今、あなたは、フォントがより多くのカリカリですが、選択は本当に愚かであることがわかります。

svgを最後に選択したフォントフェイスを追加することをおすすめします。これはあなたのフォントをウェブサイト全体に鮮明に保ちますが、オプションをうまく表示します。