Sesi Tanya & Jawab Hari ini hadir untuk memberi kami SuperUser - subdivisi Stack Exchange, pengelompokan situs web Q & A berbasis komunitas.
Pertanyaan
Pembaca SuperUser Laurent sangat penasaran mengapa laman yang tepat tampaknya memuat elemen dengan sangat berbeda dari yang pernah mereka lakukan pada suatu waktu. Dia menulis:
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.
Jadi apa yang menyebabkannya? Laurent, dan banyak dari kita, ingat waktu ketika teks dimuat pertama dan lain-lain - garap animasi GIF, latar belakang berlatar belakang ubin, dan semua artefak lain dari penelusuran web tahun 90-an - datang kemudian. Apa yang menyebabkan situasi saat ini dari elemen desain pertama, teks nanti?
Jawabannya
Kontributor SuperUser, Daniel Andersson, menawarkan jawaban mendetail yang luar biasa tepat ke bagian bawah misteri mengapa-the-font-load-last:
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;
di mana, jika font pertama tidak ditemukan di sistem, browser akan mencari yang kedua, dan terakhir adalah font “sans-serif” mundur.
Sekarang, seseorang dapat memberikan URL font sebagai aturan CSS untuk membuat browser mengunduh font, seperti:
@import url(https://fonts.googleapis.com/css?family=Droid+Serif:400,700);
lalu muat font untuk elemen tertentu dengan misalnya:
font-family: 'Droid Serif',sans-serif;
Ini sangat populer untuk dapat menggunakan font kustom, tetapi juga mengarah ke masalah bahwa tidak ada teks yang ditampilkan sampai sumber daya telah dimuat oleh browser, yang termasuk waktu unduh, waktu pemuatan font dan waktu render. Saya berharap ini adalah artefak yang Anda alami.
Sebagai contoh: salah satu surat kabar nasional saya, Dagens Nyheter, menggunakan font web untuk berita utama mereka, tetapi bukan prospek mereka, jadi ketika situs itu dimuat saya biasanya melihat arahan pertama, dan setengah detik kemudian semua ruang kosong di atas diisi dengan judul (ini benar di Chrome dan Opera, setidaknya. Belum mencoba yang lain).
(Juga, desainer taburi JavaScript benar-benar di mana-mana hari ini, jadi mungkin seseorang sedang mencoba untuk melakukan sesuatu yang pintar dengan teks, yang mengapa itu tertunda. Itu akan sangat spesifik situs, meskipun: kecenderungan umum untuk teks ditunda dalam kali adalah masalah font web yang dijelaskan di atas, saya percaya.)
Tambahan:
Jawaban ini menjadi sangat dijunjung tinggi, meskipun saya tidak merinci terlalu banyak, atau mungkinkarena ini. Ada banyak komentar di utas pertanyaan, jadi saya akan mencoba memperluas sedikit […]
Fenomena ini rupanya dikenal sebagai "flash of unstyled content" secara umum, dan "flash of unstyled text" pada khususnya. Mencari "FOUC" dan "FOUT" memberikan info lebih lanjut.
Saya dapat merekomendasikan posting desainer web Paul Irlandia di FOUT sehubungan dengan font web.
Apa yang dapat dicatat adalah bahwa browser yang berbeda menangani hal ini secara berbeda. Saya tulis di atas bahwa saya telah menguji Opera dan Chrome, yang keduanya berperilaku sama. Semua yang berbasis WebKit (Chrome, Safari, dll.) Memilih untuk menghindari FOUT olehtidak render teks font web dengan font fallback selama periode pemuatan font web. Bahkan jika font web di-cache, di sanaakan jadilah penundaan render. Ada banyak komentar di utas pertanyaan ini yang mengatakan sebaliknya dan itu salah karena font tembolok berperilaku seperti ini, tapi mis. dari tautan di atas:
Dalam kasus apa Anda akan mendapatkan FOUT
- Akan: Mengunduh dan menampilkan ttf / otf / woff jarak jauh
- Akan: Menampilkan ttf / otf / woff yang di-cache
- Akan: Mengunduh dan menampilkan data-uri ttf / otf / woff
- Akan: Menampilkan data cache-uri ttf / otf / woff
- Tidak akan: Menampilkan font yang sudah diinstal dan dinamai di tumpukan font tradisional Anda
- Tidak akan: Menampilkan font yang diinstal dan dinamai menggunakan lokal () lokasi
Karena Chrome menunggu hingga risiko FOUT hilang sebelum rendering, ini memberikan penundaan. Yangtingkat efeknya terlihat (terutama ketika memuat dari cache) tampaknya tergantung pada antara lain jumlah teks yang perlu dirender dan mungkin faktor-faktor lain, tetapi caching tidak sepenuhnya menghapus efeknya.
Irlandia juga memiliki beberapa pembaruan tentang perilaku peramban pada 2011–04–14 di bagian bawah pos:
- Firefox (seperti dari FFb11 dan FF4 Final) tidak lagi memiliki FOUT! Wooohoo! Http: //bugzil.la/499292 Pada dasarnya teks tidak terlihat selama 3 detik, dan kemudian membawa kembali font fallback. The webfont mungkin akan memuat dalam tiga detik meskipun … mudah-mudahan..
- IE9 mendukung WOFF dan TTF dan OTF (meskipun memerlukan hal-hal bitet embedding - kebanyakan diperdebatkan jika Anda menggunakan WOFF). NAMUN!!! IE9 memiliki FOUT.:(
- Webkit memiliki tambalan yang menunggu untuk mendarat untuk menampilkan teks penggantian setelah 0,5 detik. Jadi perilaku yang sama seperti FF tetapi 0,5 bukannya 3s.
Jika ini adalah pertanyaan yang ditujukan untuk desainer, seseorang dapat pergi ke cara-cara untuk menghindari masalah seperti ini
webfontloader
tapi itu akan menjadi pertanyaan lain. The Paul Irish link masuk ke detail lebih lanjut tentang masalah ini.
Memiliki sesuatu untuk ditambahkan ke penjelasan? Bicaralah di komentar. Ingin membaca lebih banyak jawaban dari pengguna Stack Exchange yang paham teknologi lainnya? Lihat diskusi lengkap di sini.
