Flash di contenuto senza stile in IE con @ font-face

Question

Sto lavorando a un sito che utilizza il carattere Open Sans per il corpo del testo, con EOT, SVG, WOFF e file di font TTF e foglio di stile generato da Font Squirrel. Ho incluso i miei caratteri CSS prima nell'intestazione della mia pagina. Ma quando guardo il sito in IE7, IE8 e persino IE9, ho un flash di tutto in Times Roman prima che l'Open Sans entri in gioco. Questo non succede negli altri browser.

Qualcuno può suggerire un modo per evitare che ciò accada? Ecco il CSS Font Squirrel sto usando per questo tipo di carattere:

@font-face { 
    font-family: 'OpenSansRegular'; 
    src: url('opensans-regular-webfont.eot'); 
    src: url('opensans-regular-webfont.eot?#iefix') format('embedded-opentype'), 
     url('opensans-regular-webfont.woff') format('woff'), 
     url('opensans-regular-webfont.ttf') format('truetype'), 
     url('opensans-regular-webfont.svg#OpenSansRegular') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Answer 1

Quello che si vede, mentre il carattere personalizzato viene scaricato non è definito nel codice di cui sopra. È definito nelle altre tue font-family istruzioni in tutto il codice CSS.

Aggiungere altri caratteri dopo il valore "OpenSansRegular", separati da virgole. Da destra a sinistra:

• a destra, la famiglia del tuo carattere. serif, sans-serif, monospace o cursive (yay Comic Sans!). Qui, OpenSansSth è ... sans-serif.
  Il tuo browser ha un'impostazione predefinita per queste famiglie, Arial, Verdana o qualche altro font in Linux, qualunque sia. È la scelta dell'utente quando non si sceglie per lui. La famiglia predefinita è serif e il carattere predefinito in Windows è 'Times New Roman'. Ecco perché vedi Times New Roman come un FOUC in IE.
• quindi un carattere Web sicuro che è il più vicino possibile al tuo carattere personalizzato. Qui sarebbe un font sans-serif come Verdana o Arial. Forse sans-serif e Verdana saranno la stessa cosa ma non sei mai sicuro (specialmente con gli utenti Linux), quindi aggiungi entrambi
• Tra il tuo carattere personalizzato e quello websafe, puoi aggiungere caratteri che potrebbero essere installati in alcuni sistemi operativi ma non sono sicuri come quelli installati con MS Office, Adobe Reader, OS X, Adobe Creative Suite, ecc. Li troverai nel 10% -90% dei computer dei visitatori, ma non al 100%. Non tutti installano una Creative Suite (solo professionisti del Web e altri designer) e MS Office (utilizzo LibreOffice) e ci sono diversi tipi di carattere installati in XP, Vista e 7
• infine, il valore più a sinistra sarà il nome personalizzato che hai dato a il tuo carattere personalizzato. OpenSansRegular nel tuo sito

Es:

  nav { font-family: 'Custom_at-font-face','closest font to the font-face one but certainly rarely found on computers by default', 'less close, 'not close but same family', Verdana,sans-serif; 
     } 

tabelle di compatibilità con percentuali (forse un po 'vecchio) http://www.codestyle.org/css/font-family/
non utilizzare 10 valori, da 3 a 6 forse sarà sufficiente;) Nel 2012 @ font-face può causare problemi di rendering a seconda del browser e del sistema operativo (aliasing) ma è molto ben supportato in modo da poter abbreviare le famiglie di font.

Answer 2

jQuery plug-in per nascondere FOUC di @font-face può essere trovato qui: How to know if a font (@font-face) has already been loaded? Rimosso il blocco di codice da questo thread come ho aggiornato da lì.