
Singkat cerita:
Lihat Bagian 1 dan Bagian 2 untuk mengetahui konteksnya.
Setelah memposting bagian kedua dari penelitian ukuran file font web saya yang sedang berlangsung, saya menerima umpan balik dari Mastodon dan efeknya hei, bagaimana kalau dapat diubah Jenis huruf?
Pertanyaan bagus! Saya berspekulasi di Bagian 2 bahwa mungkin ada penghematan biaya jika kita bisa menggabungkan varian font (tebal, miring) ke dalam file bergaya sprite. Itu font variabel (dan banyak lagi!)
Jalankan kembali skrip mereka
Ikuti proses yang dijelaskan di Bagian 1. [wght]
Dan masukkan ke dalam subset LATIN, buang yang kurang dari 200 karakter. Saya juga menghapus semua font dengan “Italic” di namanya.
Mengapa [wght]
saja dan bukan sesuatu seperti itu AdventPro[wdth,wght]
?
Saya ingin mempertahankan hanya satu dimensi variabel sehingga kita dapat melihat sebanyak mungkin situasi yang sama. Dan [wght]
Tampaknya ini merupakan dimensi yang paling populer.
Mengapa tidak ada huruf miring?
Saya ingin menjaga font tetap beragam. Kemungkinannya adalah AlbertSans-Italic[wght].ttf
Dan AlbertSans[wght].ttf
Dirancang oleh orang (atau orang-orang) yang sama. Jadi mereka menggunakan teknik serupa, pengoptimalan, dll. Saya mencari sesuatu yang secara umum “di luar sana”.
hasil
Berikut ini hasilnya dalam format HTML dan CSV.
Coba rasakan saja hasilnya…
Jumlah karakter | Jumlah mesin terbang | byte | dokumen | Nama font |
---|---|---|---|---|
235 | Bab 378 | 21400 | Afakad[wght]-subset.woff2 | Afakad |
217 | 243 | 34688 | Areo[wght]-subset.woff2 | Areo |
… | … | … | … | … |
Bab 241 | 609 | 61456 | kantor Isab[wght]-subset.woff2 | kantor Isab |
Bab 241 | 621 | 62552 | Isab[wght]-subset.woff2 | Isab |
Bab 241 | Bab 584 | 58688 | isab sayang[wght]-subset.woff2 | isab sayang |
Statistik keseluruhan:
- Ukuran file rata-rata: 50532.85970149254 byte
- Ukuran file rata-rata: 34744 byte
- Jumlah mesin terbang rata-rata: 438.4179104477612
- Jumlah median mesin terbang: 328
- Jumlah karakter rata-rata: 222
- Jumlah file font: 335
sebagai kesimpulan?
- Salah satu kesimpulan dari Bagian 1 adalah: biasa Font web dengan subset karakter tambahan Latin adalah 19092 byte. “Normal” artinya tidak ada huruf tebal, tidak ada huruf miring, dsb.
- Di sini kita melihat ukuran file median a dapat diubah Font web dengan subset karakter tambahan Latin adalah 34744 byte
- Jumlahnya lebih kecil dari bagian-bagiannya. Font variabel dengan font biasa dan tebal (bold) (dan segala sesuatu di antaranya) sedikit lebih kecil dari dua font biasa. Dengan asumsi file font tebal sama besarnya dengan file font biasa (kita akan memeriksa asumsi ini nanti), maka 19092 * 2 = 38,184 lebih besar dari 34,744
Perbedaan ukuran file tidak terlalu besar, namun kami masih melihat penghematan, mungkin karena duplikat metadata dan beberapa elemen serupa lainnya yang ada dalam dua file versus satu. Selain itu, waktu transfer dihemat – 2 permintaan HTTPS dibandingkan dengan 1 permintaan.
Potensi bias?
- Subset yang lebih kecil: Di sini kita melihat median ukuran arsip antara 335 arsip dan 1009 arsip dalam studi asli.
- Jumlah karakter tidak merata: median jumlah karakter di sini adalah 222, dibandingkan dengan 219 pada penelitian awal. (tetapi lebih dari 200). Misalnya, kita dapat mengontrol ini (dalam operasi berikutnya) dengan membandingkan hanya sebagian dari 200 karakter.
- Hanya Google Font: Ya, ini adalah perpustakaan font yang mudah diunduh dan digunakan.
Berikutnya?
Sesuai dengan semangat Bagian 2, saya ingin melihat ukurannya saat Anda menambah jumlah karakter di subset (bukan bahasa Latin yang mencakup semua). Hal ini akan mengatasi potensi bias #2 di atas. Mungkin alih-alih menambah 1, tambah 50 untuk menghemat beberapa pemrosesan.
Saya juga ingin mencoba semua font yang tersedia. Sejauh ini saya telah menonton “reguler” dan [wght] Satu satunya. Tapi saya harus melakukan semuanya dan membiarkan orang yang lebih pintar dari saya (seperti Anda, pembaca yang budiman) membagi hasilnya dan menarik kesimpulan sesuka Anda.
Komentar? Temukan saya di BlueSky, Mastodon, LinkedIn, Threads, Twitter