Chrome SVG webfonts seltsame Zeichen in ausgewählten Eingabe

Question

Chrome 26.0.1410.64m auf Windows 8 hat Probleme beim Rendern von WebFonts. Es ist ein bekanntes Problem und eine Lösung besteht darin, zuerst die Svg-Version der Schriftart anstelle der woff-Version zu verwenden. Es behebt das Anti-Aliasing und lässt die Schrift wieder schön aussehen.

Der Nachteil dieser Methode ist das seltsame Rendering innerhalb des Elements innerhalb der Select-Eingänge.

Ich habe eine Jfiddle hinzugefügt, um es in Aktion zu sehen: http://jsfiddle.net/4mSpv/6/.

Das CSS ist so einfach wie es nur sein kann.

@font-face { 
    font-family: 'Montserrat'; 
    src: url('https://raw.github.com/louh/website/master/fonts/montserrat-regular-webfont.svg#montserratregular') format('svg'); 
    font-weight: 400; 
    font-style: normal; 
} 
select { 
    font-family: 'Montserrat', sans-serif; 
} 

Ich entferne die lokale Installation einer Schriftart und bemerkte, dass ein anderer Windows 7 Computer das gleiche tut. Weiß jemand, was mit Chrom passiert? (IE, Firefox, Safari alle machen fein)

PS: Andere Browser Schriftarten nicht in JSFiddle enthalten, das Problem heraus zu filtern und jeder Browser ihre eigenen Macken (nicht erlaubt font-size usw.), aber machen der Text fein

Answer 1

Es gibt keine Möglichkeit, dieses Problem zu lösen.

Dies ist KEIN Regressionsproblem und existiert von M24.

ich einen Fehlerbericht vorgelegt und es Weird character rendering in option menu

Answer 2

Wie automaticoo erwähnt, ist es ein bekanntes Problem mit Chrome. Sie können das Problem jedoch mit einer Technik umgehen, die in der ausgewählten Antwort für diesen Beitrag erwähnt wird: Google Webfonts Render Choppy in Chrome on Windows.

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

diese Weise können Sie die Schriftart, die Sie wollen für Browser, die noch funktionieren, und ersetzen Sie es mit einem generischen HTML-Schriftart für Chrome verwenden können.

Answer 3

Also, ich suchte eigentlich nach einer Antwort dafür, und ich stolperte über diese Frage. Ich habe bemerkt, dass dieser Fehler heute noch existiert (ich habe es gerade getroffen, so ein glückliches Treffen ...). Nun habe ich nur 1 Lösung gefunden, die die SVG-Schriftart zuletzt in der @ font-face-Deklaration platziert (das bedeutet auch alle anderen Formate mit einbeziehen). Das einzige Problem ist, dass, wenn Sie für das Exampling versuchen, das Font-Rendering zu reparieren (um alles glatt zu machen und Sachen), würden Sie tatsächlich die Svg zuerst setzen. Hier sind einige Beispiele es

1 zu demonstrieren: SVG Schrift letzte, keine scharfe Schrift werden die Optionen rechts

@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; } 

So angezeigt, wie Sie die Optionen in der Auswahlbox sehen zeige nur gut, aber die Schriftart ist wirklich nicht das crips, nur auf "Register" (Sie können das besser im Vergleich zu meinem zweiten Beispiel bemerken)

2: SVG Schrift zuletzt, knackige Schrift, dumme Optionen in auswählen

@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; } 

Nun sehen Sie, dass die Schriftart viel mehr knackig, aber die Auswahl ist wirklich dumm.

Ich schlage vor, eine weitere Schriftart-Gesicht mit der SVG zuletzt nur für die Auswahl. Dadurch bleiben Ihre Schriften auf der gesamten Website klar, die Optionen werden jedoch angezeigt.