Sejak masalah yang ditimbulkan dengan menggunakan Cufon saya memberanikan diri untuk tidak menggunakan sumber font eksternal, tetapi akhir-akhir ini, saya telah mencari metode alternatif untuk memuat font untuk melihat apakah ada cara yang lebih baik; metode yang lebih baik memiliki cara untuk muncul begitu saja.
Ada banyak metode baru di luar sana, dan variasi untuk setiap metode tampaknya; Haruskah saya menggunakan typekit ? atau google webfonts (dengan js atau css)? haruskah saya terus menggunakan font yang dimuat secara lokal (mis. metode yang dibuat fontquirrel.com)?
Saya akan mencantumkan metode yang tampaknya paling diterima dengan baik di bawah ini, dengan beberapa pengujian, tetapi apakah benar-benar layak untuk dipindahkan ke font web? Sepertinya ini akan membawa beban sumber daya yang lebih tinggi (permintaan http) dan memiliki jenis format file yang lebih sedikit (kompatibilitas kurang) dll. Tetapi sepertinya file dimuat async dan efisien dalam banyak kasus.
- Apakah ini hanya masalah situasi dan kebutuhan? Jika ya, apakah itu?
- Apakah ada perbedaan drastis antara metode ini?
- Apakah ada metode yang lebih baik di luar sana yang belum saya daftarkan?
- Apa pro / kontra untuk kinerja? Lihat? ketergantungan? kompatibilitas?
Saya benar-benar mencari praktik terbaik di sini, kinerja adalah hal yang penting, begitu juga skalabilitas dan kemudahan penggunaan. Belum lagi, tampilan dan nuansa.
Google CSS
- hanya menggunakan lembar gaya eksternal
- hanya menggunakan jenis file terkecil yang kompatibel
- dapat menggunakan
@import
atau<link>
atau mengambil konten styleshee (@font-face
) dan memasukkannya langsung ke dalam lembar gaya Anda sendiri.
hasil tes
78ms load of html 36ms load of css
Metode Google JS
- digunakan
webfont.js
untuk memuat styleshet - hanya menggunakan jenis file terkecil yang kompatibel
- menambahkan
:root
elemen dengan kelas - menambahkan skrip ke head.
hasil tes
171ms load of html 176ms load of js 32ms load of css
Metode Typekit
- menambahkan
:root
elemen dengan kelas. - dapat menggunakan
*.js
cuplikan atau file*.js
file yang dimuat secara eksternal - menggunakan
data:font/opentype
alih-alih file font. - menambahkan skrip ke head
- menambahkan css yang disematkan ke head
menambahkan stylesheet eksternal ke head
Anda dapat dengan mudah menambah / menghapus / menyesuaikan font dan pemilih yang ditargetkan dari typekit.com
hasil tes
169ms load of html 213ms load of js 31ms load of css 3ms load of data:font/
… & Metode Font Squirrel
@font-face{
font-weight:400;
font-style:normal;
font-family:open_sanslight;
src:url(../font/opensans-light-webfont.eot);
src:url(../font/opensans-light-webfont.eot?#iefix) format(embedded-opentype),
url(../font/opensans-light-webfont.woff) format(woff),
url(../font/opensans-light-webfont.ttf) format(truetype),
url(../font/opensans-light-webfont.svg#open_sanslight) format(svg)
}
… Atau dengan data: metode font…
@font-face {
font-family: 'open_sanslight';
src: url('opensans-light-webfont-f.eot');
}
@font-face {
font-family: 'open_sanslight';
src: url(data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAF4sABMAAAAArXQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABqAAAABwAAAAcZLn0KkqwK44Jq866WBSpzpsNY2IyGAhoJFBbYjuxmyns5sNa4NwldcJ7eh3Uy5gQkURIlqWzONe3HcLsDX1x/+jifDXvbzgTBjopZElndil3hJkERJkmRJkVRJk3TJkEzJkmzOc4HLXOEOF7nEX/*thisisnotafullencodingjustanexample*/bZwUnK4yS3JlTx2Sr4USKEUSbHVX9fcGNBs4fqgw+GoNHU7lKr36Eqn0lCWt6pHFpWaUlc6lS6loSxRlirLlP/uuU01dVfT7L6gPxyqraluCpgj3WtqeC1V4VBDW2N4K1r1esw/IupKp9L1FwlqnuIAAAB42j3NvQ7BUBjG8R5tTz/0u2UjNTTESYQbMGmXLiISbeI6zBYjbuWtye7CeMJxtuf3LP8ne1+IXbWa7G3TMXZru4qLZkJRW1O2wzi3I+Li2Gik5yXpYkNGXj70YU98YQLGHxwwXxIWwO8SNmAdJBzAXku4gFNI9AF38QMjTwZ9vN6yJzq9OoEB6I8VQzDYK0ZguFKMwWiumIDxTDEFk6liBqaF4gDMFFvKxAfOxFUGAAABUxSL9gAA) format('woff'),
url('opensans-light-webfont-f.ttf') format('truetype'),
url('opensans-light-webfont-f.svg#open_sanslight') format('svg');
font-weight: normal;
font-style: normal;
}
sumber
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet'>
Georgian
. Saya menggunakan metode font-squirrel, dan saya ingin melihat jawaban yang bagus untuk pertanyaan ini juga.@font-face
deklarasi antipeluru , mungkin Anda dapat menemukan informasi yang berguna. paulirish.com/2009/bulletproof-font-face-implementation-syntaxJawaban:
Pertama, saya akan menjelaskan sesuatu tentang penawaran Google. Ini benar-benar akan memuat format terkecil yang dapat ditangani browser Anda. WOFF menawarkan ukuran file kecil, dan browser Anda mendukungnya, jadi itulah yang Anda lihat. WOFF juga cukup banyak didukung. Namun, di Opera misalnya, Anda mungkin akan mendapatkan font versi TrueType.
Logika ukuran file juga, saya yakin, mengapa Font Squirrel mencobanya dalam urutan itu. Tapi itu sebagian besar spekulasi di pihak saya.
Jika Anda bekerja di lingkungan di mana setiap permintaan dan byte dihitung, Anda harus melakukan beberapa profil untuk mencari tahu mana yang terbaik untuk kasus penggunaan Anda. Akankah orang hanya melihat satu halaman, dan tidak pernah mengunjungi lagi? Jika demikian, aturan cache tidak terlalu penting. Jika mereka menjelajah atau kembali, Google mungkin memiliki aturan caching yang lebih baik daripada server Anda. Apakah latensi adalah masalah yang lebih besar, atau bandwidth? Jika latensi, bidik permintaan lebih sedikit, jadi hosting secara lokal dan gabungkan file sebanyak mungkin. Jika bandwidth, gunakan opsi mana pun yang berakhir dengan kode terkecil dan format font terkecil.
Sekarang, ke pertimbangan CSS vs JS. Mari kita lihat bagian HTML berikut:
Dalam banyak kasus,
script1
,style1
, danstyle2
akan memblokir. Ini berarti browser tidak dapat terus menampilkan dokumen hingga resource tersebut dimuat (meskipun browser modern memalsukannya sedikit). Yang sebenarnya bisa menjadi hal yang baik, terutama dengan stylesheet. Ini mencegah kilatan konten tanpa gaya, dan juga mencegah perubahan besar yang akan terjadi saat menerapkan gaya (dan menggeser konten benar-benar mengganggu sebagai pengguna).Di sisi lain,
script2
tidak akan menghalangi. Ini dapat dimuat nanti, dan browser dapat melanjutkan ke penguraian dan menampilkan dokumen lainnya. Sehingga bisa bermanfaat juga.Secara khusus berbicara tentang font (dan lebih khusus lagi, penawaran Google), saya mungkin akan tetap menggunakan metode CSS (saya suka
@import
karena metode ini tetap menata gaya dengan stylesheet, tetapi itu bisa jadi hanya saya). File JS yang dimuat oleh skrip ( http://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js ) lebih besar dari@font-face
deklarasi, dan sepertinya lebih banyak berfungsi. Dan saya tidak percaya memuat font sebenarnya itu sendiri (WOFF atau TTF) memblokir, jadi seharusnya tidak terlalu banyak menunda. Secara pribadi saya bukan penggemar berat CDN, tetapi faktanya mereka SANGAT cepat. Server Google akan mengalahkan sebagian besar paket hosting bersama dengan telak, dan karena font mereka sangat populer, orang-orang bahkan mungkin sudah menyimpannya dalam cache.Dan hanya itu yang saya punya.
Saya tidak memiliki pengalaman dengan Typekit, jadi saya meninggalkannya dari teori saya. Jika ada ketidakakuratan, tidak menghitung generalisasi antar browser demi argumen, harap tunjukkan.
sumber
Saya pikir Anda telah membahas waktu muat dengan sangat baik dalam pertanyaan Anda. Dari sudut pandang saya, ada beberapa sumber yang harus ditambahkan ke daftar, dan beberapa pertimbangan lain yang harus diperiksa untuk mendapatkan gambaran lengkap tentang opsi.
Beberapa sumber font terkemuka lainnya
cloud.typography
http://www.typography.com/cloud/
Dari apa yang saya tahu, font disematkan sebagai data dalam file CSS:
Berikut spesifikasi saya:
Berikut adalah deskripsi tingkat tinggi penerapan mereka .
Fonts.com
Saya belum pernah menggunakan layanan ini, tetapi mereka adalah vendor font yang sangat mapan, dan informasi yang mereka cantumkan di situs mereka cukup mengesankan. Saya tidak memiliki spesifikasi tentang metode pastinya, tetapi inilah yang saya tahu mereka miliki:
FontSpring
Berafiliasi dengan FontSquirrel. Font dapat dibeli di sini dengan harga tetap. File font yang disertakan dengan CSS dikirimkan, untuk digunakan di server Anda sendiri, seperti FontSquirrel.
Spesifikasi yang diperluas
Mengenai pro dan kontra keseluruhan dari setiap layanan font, berikut adalah beberapa perbandingan:
Ukuran Perpustakaan Font
Penetapan harga
Kualitas Font
Kualitas font web dapat sedikit berbeda. Ini dapat mencakup hal-hal seperti bentuk huruf itu sendiri atau jarak atau ukuran kumpulan karakter. Semua ini menentukan kesan keseluruhan kualitas yang akan diberikan font. Meskipun opsi gratis memiliki beberapa opsi bagus, mereka juga memiliki beberapa font yang tidak berkualitas tinggi, jadi Anda ingin memilih dengan hati-hati dari sumber tersebut.
Kualitas Font II: Tipografi
Ada banyak perbaikan dalam tipografi desktop yang sangat sulit didapat di font web. Beberapa dari layanan ini menawarkan cara untuk menyampaikannya.
Dukungan browser
Ini sebagian besar tergantung pada format font yang didukung oleh setiap layanan. Yang utama adalah:
Informasi lebih lanjut di The @ Font-Face Rule Dan Trik Font Web yang Berguna
Semua layanan ini mendukung format font utama. Dengan font yang dihosting sendiri, selama Anda menggunakan sintaks yang benar, Anda harus dilindungi. Berikut pembaruan 2011 sintaks antipeluru dari FontSpring :
Kinerja I: Unduhan
Sejauh yang saya pahami, menggunakan sintaks di atas memungkinkan browser mengambil format tertentu yang sesuai untuk mereka, jadi tidak ada unduhan yang sia-sia pada format font yang tidak berfungsi.
Layanan berbayar seperti Fonts.com, Typekit, atau Typography.com menggunakan metode untuk mendeteksi format yang benar dan kemudian mengirimkan format font yang tepat, sering kali sebagai data base64 dalam file CSS.
Dari apa yang saya lihat, perbedaan dalam metode yang Anda cantumkan di atas cukup dapat diabaikan untuk pengguna internet berkecepatan tinggi (sepertinya perbedaan <200 md), tetapi mungkin layak dipertimbangkan untuk perangkat di jaringan yang lebih lambat, terutama untuk klik halaman yang tidak di-cache.
Kinerja II: Subsetting
Jika Anda tahu bahwa hanya akan ada karakter tertentu yang ingin Anda gunakan, Anda dapat membuat font dengan subset karakter dan dengan demikian mengurangi ukuran unduhan.
Kinerja III: Pengiriman
Dukungan bahasa
Pengujian dan Implementasi
sumber
Nah, seperti yang Anda kejar
jawabannya adalah (seperti biasa dalam desain web): Tergantung!
Satu hal yang pasti adalah, saya tidak akan merekomendasikan untuk menggunakan pendekatan JS (ditunjukkan dalam contoh kedua Anda).
Secara pribadi saya tidak suka membuat hal-hal presentasi dan gaya CSS tergantung pada Javascript, meskipun sebagian besar pengguna telah mengaktifkannya. Ini adalah pertanyaan untuk tidak mencampurkan banyak hal.
Dan seperti yang Anda lihat di contoh yang diberikan, ada semacam FOUC (flas konten tanpa gaya), karena halaman sudah dirender oleh browser sebelum font tersedia. Segera setelah itu, halaman digambar ulang. Dan semakin besar situs, semakin besar dampak (kinerja)!
Jadi saya tidak akan pernah menggunakan solusi JS untuk penyematan font.
Sekarang mari kita lihat metode CSS murni.
Sudah cukup lama inilah pembahasan tentang "vs. @import". Secara pribadi saya lebih suka menghindari penggunaan @import dan selalu gunakan
<link>
saja. Tapi ini terutama soal preferensi pribadi. Satu hal yang memang tidak boleh Anda lakukan adalah mencampurkan keduanya!Lokal vs. CDN
Ketika memutuskan apakah akan meng-host file font Anda secara lokal atau menggunakan CDN, maka imho sebagian besar tergantung pada jumlah font yang berbeda dan font yang ingin Anda sematkan.
Mengapa ini penting, atau berperan?
Dari sudut pandang kinerja, saya akan merekomendasikan untuk menyertakan font Base64 yang dikodekan dalam lembar gaya (satu) Anda. Tetapi hanya format .woff, karena ini digunakan oleh hampir semua browser modern, yang berarti bagi sebagian besar pengunjung Anda. Untuk semua pengguna lain tinggal dengan permintaan tambahan.
Namun karena "overhead" yang disebabkan oleh pengkodean Base64 dan ukuran file font (bahkan dalam format .woff) teknik ini hanya boleh digunakan, jika Anda memiliki tidak lebih dari 3 atau 4 font yang berbeda. Dan selalu pastikan, bahwa server Anda mengirimkan file (CSS) dengan gzip.
Keuntungan besar dari melakukannya adalah Anda tidak memiliki permintaan tambahan untuk file font. Dan setelah pemuatan halaman pertama (tidak peduli halaman mana dari situs Anda) file CSS di-cache. Ini juga merupakan keuntungan jika Anda menggunakan cache aplikasi HTML5 (yang pasti akan Anda lakukan).
Selain fakta bahwa seorang penulis tidak boleh menggunakan lebih dari maksimal 3 atau 4 font berbeda di situsnya, mari kita lihat cara menggunakan CDN Google.
Pertama-tama ketahuilah, bahwa Anda dapat (dan selalu harus) menyertakan semua font yang diinginkan menjadi satu
<link>
, seperti:Ini akan menghasilkan respons berikut:
Seperti yang Anda lihat, ada 9 file font yang berbeda, yang berarti total 10 permintaan (termasuk salah satu elemen link), jika pengguna tidak memiliki satu atau lebih font yang diminta diinstal secara lokal. Dan permintaan ini diulangi di setiap permintaan halaman baru ke situs Anda (meskipun tidak ada lagi data yang ditransfer)! Juga tanggapan atas permintaan
<link>
tidak pernah disimpan dalam cache.Rekomendasi:
Bagaimanapun, saya benar-benar akan merekomendasikan untuk menyertakan file font Anda dalam format .woff Base64 yang dikodekan dalam style sheet Anda!
Lihat artikel bagus ini untuk contoh dan deskripsi tentang cara melakukannya!
sumber
Saya menggunakan metode css inline karena biaya overhead permintaan tambahan lebih dari peningkatan ukuran saat pengkodean bease64. Ini juga selanjutnya diimbangi oleh kompresi gizip oleh server file css.
Pilihan lainnya adalah menggunakan pemuatan font yang tidak sinkron tetapi paling sering pengguna akan melihat font muncul setelah dimuat.
Terlepas dari metodenya, Anda dapat mengurangi ukuran file font hanya dengan memasukkan set karakter yang akan Anda gunakan.
sumber
Secara pribadi saya menggunakan Google Fonts. Mereka memiliki beragam pilihan yang bagus dan mereka baru-baru ini meningkatkan kompresi pada font dengan pindah ke kompresi Zopfli juga. Google sedang berusaha untuk membuat web lebih cepat, jadi saya kira lebih banyak pengoptimalan pada bagian itu akan datang dari mereka juga.
Apa pun yang Anda pilih sebagai pengiriman font yang dialihdayakan, Anda akan selalu mendapatkan pengurangan kecepatan dengan permintaan untuk mendapatkan font. Hal terbaik, dilihat dari perspektif kecepatan, akan menyajikan font itu sendiri. Jika Anda tidak peduli dengan milidetik ekstra yang diperlukan untuk memuat dari pengiriman yang dialihdayakan, Anda harus menggunakannya jika menurut Anda kemudahan penggunaannya sepadan dengan milidetik.
Saya tidak tahu tentang Typekit dan yang lainnya, tetapi dengan Google Fonts Anda dapat memilih untuk dilayani subset tertentu dan berbagai karakter untuk lebih mempercepat pengiriman.
Memilih subset:
Memilih berbagai karakter:
Anda dapat menggunakan dns-prefetch untuk meningkatkan kecepatan lebih jauh dengan pengiriman font.
Saya berpikir, dan berharap, bahwa Google akan melakukan semua yang mereka bisa untuk mempercepat pengiriman font mereka sebanyak yang mereka bisa. Milidetik yang diperlukan untuk memuatnya tidak merusak situs web saya, jadi saya dengan senang hati menggunakannya.
Singkat cerita:
Jika pengiriman font milidetik merugikan situs Anda, misalnya dengan membuatnya memuat lebih dari 1 detik yang disarankan, saya pikir Anda harus menghostingnya sendiri.
sumber
<link rel=dns-prefetch href='//fonts.googleapis.com'>
Saya menggunakannya untuk analitik, pemetaan panas, dan subdomain, karena alasan tertentu itu tidak terdaftar untuk dijalankan untuk font web eksternal. Dan waktu buka sangat berbeda dari font ke font, saya kira jika Anda menggunakan font yang cukup populer (mungkin di-cache) atau hanya beberapa font tertentu, menggunakan font web adalah sumber font yang cukup cepat. Saya akan memposting tes kecepatan di sini segera.Opsi terbaik adalah mengimpor font menggunakan ajax, seperti ini:
Saya melakukan ini di halaman web saya dan meningkatkan 9 poin dalam tes Google Insights.
sumber
async
atribut? Itu melakukan hal yang sama.