La sessione di domande e risposte di oggi ci viene fornita per gentile concessione di SuperUser, una suddivisione di Stack Exchange, un raggruppamento di domande e risposte basato sulla comunità.
La domanda
Lettore SuperUser Laurent è molto curioso di sapere perché esattamente le pagine sembrano caricare gli elementi in modo completamente diverso rispetto a una volta. Lui scrive:
I’ve noticed that recently many websites are slow to display their text. Usually, the background, images and so on are going to be loaded, but no text. After some time the text starts appearing here and there (not always all of it at the same time).
It basically works the opposite as it used to, when the text was displayed first, then the images and the rest was loading afterwards. What new technology is creating this issue? Any idea?
Note that I’m on a slow connection, which probably accentuates the problem.
See [above] for an example – everything’s loaded but it takes a few more seconds before the text is finally displayed.
Quindi cosa dà? Laurent, e molti di noi, ricordano un tempo in cui il testo veniva caricato per primo e tutte le altre GIF animate, gli sfondi piastrellati e tutti gli altri artefatti della navigazione web degli ultimi anni '90 venivano in seguito. Che cosa causa la situazione attuale degli elementi di design, testo dopo?
La risposta
Il contributore SuperUser Daniel Andersson offre una risposta meravigliosamente dettagliata che arriva direttamente al fondo del mistero del perché-i-caratteri-carico-ultimo:
One reason is that web designers nowadays like to use web fonts (usually in WOFF format), e.g. throughGoogle Web fonts.
Previously, the only fonts that were able to be displayed on a site was those that the user had locally installed. Since e.g. Mac and Windows users not necessarily had the same fonts, designers instinctively always defined rules as
font-family: Arial, Helvetica, sans-serif;
dove, se il primo carattere non è stato trovato sul sistema, il browser cercherebbe il secondo, e infine un font "sans-serif" di fallback.
Ora, si può dare un URL del font come regola CSS per ottenere il browser per scaricare un font, in quanto tale:
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);
e quindi caricare il carattere per un elemento specifico, ad es.
font-family: 'Droid Serif',sans-serif;
Questo è molto popolare per essere in grado di usare caratteri personalizzati, ma porta anche al problema che nessun testo viene visualizzato fino a quando la risorsa non è stata caricata dal browser, che include il tempo di download, il tempo di caricamento dei font e il tempo di rendering. Mi aspetto che questo sia l'artefatto che stai vivendo.
Ad esempio: uno dei miei giornali nazionali, Dagens Nyheter, usa i caratteri web per i titoli, ma non i loro lead, quindi quando viene caricato quel sito di solito vedo i lead prima, e mezzo secondo dopo tutti gli spazi vuoti sopra sono popolati con titoli (questo è vero su Chrome e Opera, almeno. Non ho provato altri).
(Inoltre, i progettisti spruzzano JavaScript assolutamente ovunque in questi giorni, quindi forse qualcuno sta cercando di fare qualcosa di intelligente con il testo, motivo per cui è in ritardo. Ciò sarebbe molto specifico per il sito, tuttavia: la tendenza generale del testo a ritardare in questi volte è il problema dei caratteri web descritto sopra, credo.)
aggiunta:
Questa risposta è diventata molto pubblicizzata, anche se non sono entrato nei dettagli, o forseperché di questo. Ci sono stati molti commenti nella discussione della domanda, quindi cercherò di espandere un po '[…]
Il fenomeno è apparentemente noto come "flash di contenuto inascoltato" in generale, e "flash of unstyled text" in particolare. La ricerca di "FOUC" e "FOUT" fornisce maggiori informazioni.
Posso consigliare il post del web designer Paul Irish su FOUT in connessione con i caratteri web.
Quello che si può notare è che i diversi browser gestiscono diversamente. Ho scritto sopra che avevo testato Opera e Chrome, che si comportavano entrambi allo stesso modo. Tutti quelli basati su WebKit (Chrome, Safari, ecc.) Scelgono di evitare FOUT dinon rendering del testo del font web con un font di fallback durante il periodo di caricamento del font web. Anche se il font web è memorizzato nella cache, lìvolontà essere un ritardo di rendering. Ci sono molti commenti in questa domanda che dicono il contrario e che è completamente sbagliato che i caratteri memorizzati nella cache si comportino in questo modo, ma ad es. dal link precedente:
In quali casi otterrai un FOUT
- Volontà: Download e visualizzazione di un ttf / otf / woff remoto
- Volontà: Visualizzazione di un ttf / otf / woff memorizzato nella cache
- Volontà: Download e visualizzazione di un data-urt ttf / otf / woff
- Volontà: Visualizzazione di dati memorizzati nella cache-uri ttf / otf / woff
- Non lo farò: Visualizzazione di un font che è già stato installato e denominato nel tuo tradizionale stack di font
- Non lo farò: Visualizzazione di un font installato e denominato utilizzando la posizione locale ()
Poiché Chrome attende fino a quando il rischio di FOUT non è terminato prima del rendering, questo dà un ritardo. A cuiestensione l'effetto è visibile (specialmente quando si carica dalla cache) sembra dipendere, tra le altre cose, dalla quantità di testo che deve essere reso e forse da altri fattori, ma la cache non rimuove completamente l'effetto.
Irlandese ha anche alcuni aggiornamenti riguardanti il comportamento del browser dal 2011-04-14 in calce al post:
- Firefox (come da FFb11 e FF4 Final) non ha più un FOUT! Wooohoo! Http: //bugzil.la/499292 Fondamentalmente il testo è invisibile per 3 secondi, quindi riporta il font di fallback. Il webfont probabilmente caricherà entro quei tre secondi anche se … si spera..
- IE9 supporta WOFF e TTF e OTF (sebbene richieda un bit di incorporamento - per lo più discutibile se si usa WOFF). PERÒ!!! IE9 ha un FOUT.:(
- Webkit ha una patch in attesa di atterrare per mostrare il testo di fallback dopo 0,5 secondi. Quindi lo stesso comportamento di FF ma 0.5s invece di 3s.
Se questa fosse una domanda rivolta ai designer, si potrebbe andare in modi per evitare questo tipo di problemi come
webfontloader
ma quella sarebbe un'altra domanda. Il collegamento di Paul in Irlanda approfondisce ulteriormente la questione.
Hai qualcosa da aggiungere alla spiegazione? Sound off nei commenti. Vuoi leggere più risposte dagli altri utenti di Stack Exchange esperti di tecnologia? Controlla la discussione completa qui.
