Font-face, scompone il menu a tendina del completamento automatico nel browser Opera

Question

Come ho detto nel titolo, quando si utilizza font-font css, font personalizzato (font-face), si incasina (sfondo nero, testo nero (credo)) elenco a discesa completo automatico in Opera.

input[type='text'], input[type='password'], input[type='email'], input[placeholder] { 
    font-size: 1.2em; 
    font-family: sans-serif; 
    color: #2A873A; 
    padding-left: 25px; 
} 

Il codice sopra funziona bene, ma se sostituisco "font-family: sans-serif;" con font font-face (anche google web font), quindi il problema inizia.

Ecco lo screenshot di "bug" in azione.

P.S. Devo dire che questo è autocompletato nativo di Opera, non js personalizzati, elenco a discesa.

EDIT: http://jsfiddle.net/burCR/

Answer 1

Avete provato a specificare il tipo di carattere direttamente nel CSS? per esempio:

div.magicsomething {font-family:CustomFont,Customfont2,sans-serif;} 

Tenete a mente gli elementi annidati rimane bloccata con font personalizzati, quindi se non fate quanto sopra, si può anche molto bene bisogno font-family:inherit nei tuoi 'elementi annidati'.

per un aiuto supplementare, si prega di citare il nome del carattere personalizzato, il CSS completo e un collegamento in diretta al tuo sito

Answer 2

Anche se questo può essere una cosa ovvia, controllare per assicurarsi che il tipo di carattere è compatibile con Opera. Ecco una lista di alcuni font web safe.

http://www.w3schools.com/cssref/css_websafe_fonts.asp

E se questo non funziona provare a prendere il tipo di carattere che si desidera da Microsoft Word e utilizzare @fontface inserire voi personalizzato carattere invece di utilizzare un websafe uno.

E infine provare a utilizzare la famiglia di caratteri sul modulo e avere l'input ereditare il carattere. Speriamo che questo ci abbia aiutato.

Answer 3

Idem per specificare direttamente il carattere. Potresti anche provare a usare la codifica base64, che nella mia esperienza funziona magnificamente e con una grande compatibilità cross-browser.

Answer 4

È possibile specificare i colori per lo sfondo e il testo singolarmente.

input { 
    background-color: white; 
    color: black; 
    font-family: "My Fontface Font", Verdana, ms serif; 
}