2013-04-16 29 views
8

Chrome 26.0.1410.64m su Windows 8 ha problemi nel rendering di WebFonts. È un problema noto e una soluzione è di servire prima la versione svg del font invece della versione woff. Corregge l'anti-aliasing e rende il font ancora più bello.Caratteri Web SVG di Chrome strani caratteri nell'input selezionato

Lo svantaggio di questo metodo è il rendering strano all'interno dell'elemento all'interno degli input selezionati.

Ho aggiunto un jsfiddle per vederlo in azione: http://jsfiddle.net/4mSpv/6/.

Il CSS è semplice come può essere.

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

ho rimuovere l'installazione locale di un tipo di carattere e notato un 7 computer di altre finestre facendo lo stesso. Qualcuno sa cosa sta succedendo con Chrome? (IE, Firefox, Safari tutto render bene)

Select input rendering font chrome

PS: altro browser non i font contenuti nel JSFiddle per filtrare il problema e ogni browser hanno le proprie peculiarità (che non consentono font-size, ecc), ma il rendering il testo fine

+1

Potrebbe per favore condividere il link al bug report qui? – ComFreek

+1

Ne ho appena creato uno mentre eseguivo il test su più dispositivi con Chrome e in grado di verificare il problema. https://code.google.com/p/chromium/issues/detail?id=232099&thanks=232099&ts=1366149037 – automaticoo

+1

Btw, non è solo Win8, lo stesso problema su OSX Chrome. – Vexter

risposta

3

Non c'è modo di risolvere questo problema.

Questo NON è un problema di regressione ed esiste da M24.

ho presentato un bug report e Weird character rendering in option menu

+1

Data la priorità che stanno dando i problemi di rendering dei font in generale, è improbabile che lo vedremo presto. Per quello che vale ho recitato nel bug report per dargli un po 'più di peso. Fino ad allora, tornerò al carattere generico per le mie caselle di selezione – Vexter

+0

sì, sono tornato al carattere normale anche nelle caselle di selezione. È un po 'fastidioso e facile da riprodurre. Sono d'accordo che hanno già un sacco di bug di rendering dei font e questo è probabilmente un caso limite per loro – automaticoo

2

Come automaticoo detto, si tratta di un problema noto con Chrome. Tuttavia, è possibile risolvere il problema con una tecnica menzionata nella risposta selezionata per questo post: Google Webfonts Render Choppy in Chrome on Windows.

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

In questo modo è possibile utilizzare qualsiasi tipo di carattere che si desidera per i browser che funzionano ancora, e sostituirlo con un font HTML generico per Chrome.

0

Quindi, in realtà stavo cercando una risposta per questo, e mi sono imbattuto in questa domanda. Ho notato che questo bug esiste ancora oggi (l'ho appena incontrato, un incontro così felice ...). Ora ho trovato solo 1 soluzione, che sta posizionando il font svg ultimo nella dichiarazione @ font-face (questo significa anche includere tutti gli altri formati). L'unico problema è che, quando per esempio si prova a correggere il rendering dei font (per renderlo tutto fluido e roba) in realtà si mette prima lo svg. Ecco alcuni esempi per dimostrare che

1: carattere SVG scorso, nessun tipo di carattere croccante, le opzioni vengono visualizzate a destra

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

Example 1

Quindi, come potete vedere, le opzioni nella casella di selezione mostra bene, ma il font in realtà non è quel crips, basta guardare "Register" (potresti notare questo meglio rispetto al mio secondo esempio)

2: font SVG last, font crisp, opzioni stupide in select

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

Example 2

Ora si vedrà che il tipo di carattere è molto più nitida, ma la selezione è veramente stupido.

Suggerisco di aggiungere un altro font-face con lo svg last solo per select. Ciò manterrà i tuoi caratteri nitidi in tutto il sito ma mostrerà le opzioni bene.

Problemi correlati