29Aug
Pertanyaan Hari Ini &Sesi jawaban datang kepada kami atas izin SuperUser - subdivisi dari Stack Exchange, pengelompokan berbasis komunitas dari Q & A situs web.
Pertanyaan
Pembaca superuser Laurent sangat penasaran mengapa halaman benar-benar memuat elemen sama sekali berbeda dari yang mereka lakukan pada suatu waktu. Dia menulis:
Saya telah memperhatikan bahwa belakangan ini banyak situs web lambat untuk menampilkan teks mereka. Biasanya, latar belakang, gambar dan sebagainya akan dimuat, tapi tidak ada teks. Setelah beberapa saat teks mulai muncul di sana-sini( tidak selalu semuanya pada saat yang bersamaan).
Pada dasarnya bekerja berlawanan seperti dulu, ketika teks itu ditampilkan terlebih dahulu, maka gambar dan sisanya dimuat setelahnya. Teknologi baru apa yang menciptakan masalah ini? Ada ide?
Perhatikan bahwa saya sedang dalam koneksi yang lambat, yang mungkin menonjolkan masalah ini.
Lihat [di atas] untuk contoh - semuanya dimuat tapi dibutuhkan beberapa detik lagi sebelum teks itu akhirnya ditampilkan.
Jadi apa yang memberi? Laurent, dan banyak dari kita, ingat saat teks pertama dimuat dan segala sesuatu yang lain-animasi animasi GIF, latar belakang ubin, dan semua artefak lain dari penjelajahan web tahun 90an-datang kemudian. Apa yang menyebabkan situasi saat ini elemen desain pertama, teks nanti?
Jawaban Kontributor
SuperUser Daniel Andersson menawarkan jawaban yang sangat rinci yang sampai ke dasar misteri mengapa-the-fonts-load-last:
Salah satu alasannya adalah bahwa perancang web saat ini suka menggunakan font web( biasanya dalam format WOFF), misalnyamelalui font Google Web.
Sebelumnya, satu-satunya font yang dapat ditampilkan di situs adalah situs yang dipasang pengguna secara lokal. Sejak mis. Pengguna Mac dan Windows tidak harus memiliki font yang sama, desainer secara naluriah selalu mendefinisikan peraturan sebagai keluarga font
: Arial, Helvetica, sans-serif;dimana, jika font pertama tidak ditemukan pada sistem, browser akan mencari yang kedua, dan terakhir adalah font "sans-serif" yang mundur.
Sekarang, seseorang dapat memberi URL font sebagai aturan CSS agar browser bisa mendownload font, seperti:
@import url( http: //fonts.googleapis.com/ css? Family = Droid + Serif: 400.700);dan kemudian muat font untuk elemen tertentu misalnya:
font-family: 'Droid Serif', sans-serif;Ini sangat populer untuk dapat menggunakan font khusus, namun juga mengarah ke masalah bahwa teks tidak ditampilkan sampai sumber daya telah dimuat oleh browser, yang mencakup waktu download, waktu pemuatan font dan waktu pembuatan. Saya berharap bahwa inilah artefak yang Anda alami. Sebagai contoh: salah satu koran nasional saya, Dagens Nyheter, menggunakan font web untuk tajuk utama mereka, tapi bukan prospeknya, jadi ketika situs dimuat, biasanya saya melihat petunjuknya terlebih dahulu, dan setengah detik kemudian semua ruang kosong di atas adalahdihuni dengan berita utama( ini benar di Chrome dan Opera, setidaknya. Belum pernah mencoba yang lain).
( Juga, perancang menaburkan JavaScript di mana-mana akhir-akhir ini, jadi mungkin seseorang mencoba melakukan sesuatu yang pintar dengan teksnya, karena itulah penundaannya. Akan sangat spesifik, walaupun: kecenderungan umum teks tertunda dalamkali ini adalah masalah font web yang dijelaskan di atas, saya yakin.)
Penambahan:
Jawaban ini menjadi sangat upvoted, meski saya tidak membahas secara detail, atau mungkin karena ini. Ada banyak komentar di thread pertanyaan, jadi saya akan mencoba untuk memperluas sedikit [...]
Fenomena ini nampaknya dikenal sebagai "kilasan konten yang tidak bertingkat" pada umumnya, dan "teks yang tidak bertepung" secara khusus. Mencari "FOUC" dan "FOUT" memberi info lebih lanjut.
Saya dapat merekomendasikan perancang web Paul Irish's post on FOUT sehubungan dengan font web.
Yang bisa kita perhatikan adalah bahwa browser yang berbeda menangani hal ini secara berbeda. Saya menulis di atas bahwa saya telah menguji Opera dan Chrome, yang keduanya berperilaku sama. Semua berbasis WebKit( Chrome, Safari, dll.) Memilih untuk menghindari FOUT oleh bukan yang merender teks font web dengan font fallback selama masa pemuatan font web. Bahkan jika font web di-cache, di sana akan menjadi penundaan render .Ada banyak komentar dalam thread pertanyaan ini yang mengatakan sebaliknya dan itu agak salah bahwa font yang di-cache seperti ini, tapi mis.dari tautan di atas:
Dalam kasus apa Anda akan mendapatkan FOUT
- Akan: Men-download dan menampilkan remote ttf /otf/ woff
- Akan: Menampilkan cache cache ttd /otf/ woff
- Will: Mengunduh dan menampilkan data-uri ttf /otf/ woff
- Will: Menampilkan data yang di-cache -Dengan /otf/ woff
- Tidak akan: Menampilkan font yang sudah terpasang dan dinamai dalam tumpukan font tradisional Anda
- Tidak akan: Menampilkan font yang diinstal dan dinamai dengan menggunakan lokal() lokasi
Karena Chrome menunggu sampai risiko FOUT hilang sebelum rendering, ini akan memberikan penundaan. Untuk sejauh , efeknya terlihat( terutama saat memuat dari tembolok) tampaknya bergantung pada antara lain jumlah teks yang perlu diberikan dan mungkin faktor lainnya, namun caching tidak sepenuhnya menghilangkan pengaruhnya.
Irlandia juga memiliki beberapa update mengenai perilaku browser pada 2011-04-14 di bagian bawah posting:
- Firefox ( seperti Final FFb11 dan FF4) tidak lagi memiliki FOUT! Wooohoo! Http: //bugzil.la/ 499292 Pada dasarnya teks ini tidak terlihat selama 3 detik, dan kemudian mengembalikan font fallback. Webfont mungkin akan dimuat dalam tiga detik itu meskipun. .. semoga. .
- IE9 mendukung WOFF dan TTF dan OTF( meskipun memerlukan hal-hal biting embedding - kebanyakan diperdebatkan jika Anda menggunakan WOFF). NAMUN! !!IE9 memiliki FOUT.:(
- Webkit memiliki patch yang menunggu untuk mendarat untuk menunjukkan teks fallback setelah 0,5 detik. Jadi, perilaku yang sama seperti FF tapi 0.5s bukan 3s.
Jika ini adalah pertanyaan yang ditujukan untuk perancang, orang bisa beralih ke cara untuk menghindari jenis ini.masalah seperti webfontloader, tapi itu akan menjadi pertanyaan lain Link Paul Irish membahas detail lebih lanjut tentang masalah ini
Miliki sesuatu untuk ditambahkan ke penjelasan? Suara di dalam komentar Ingin membaca lebih banyak jawaban dari teknologi-Pengguna Stack Exchange yang cerdas? Simak thread diskusi selengkapnya di sini.
