Awal tahun ini, saya ingin tahu berapa KB yang “normal” untuk ukuran file font web (peringatan spoiler: sekitar 20 KB). Saya menyelesaikan artikel ini dengan menanyakan betapa bermanfaatnya subset, artinya Anda dapat dengan susah payah memilih karakter mana yang harus tetap berada di subset, bukan hanya guratan lebar (ASCII, Latin, Cyrillic, dll.) untuk menghemat uang.
Jadi inilah studi lanjutan tentang ukuran file, saya mengelompokkan 1009 file font yang ditemukan di Google Fonts GitHub, satu karakter pada satu waktu, menghasilkan 222.557 file WOFF2.
Kendala
Saya harus menerapkan beberapa batasan agar penelitian ini tidak terlalu luas namun representatif. Artikel sebelumnya memiliki alasan yang mendetail, namun berikut adalah hal-hal penting:
- Periksa hanya Google Font karena font ini lebih mudah diunduh secara massal dan sangat populer
- Hanya lihat font “biasa” (jadi tidak ada huruf miring, tidak ada huruf tebal)
- Lihat font yang berisi setidaknya 200 karakter Latin
Jadi. Kami sekarang memiliki 1009 file TTF, masing-masing berisi 200 karakter atau lebih. Daftar lengkap dan datanya akan diberikan nanti di artikel.
Langkah 1: Apa isi fontnya?
Kita mulai dengan skrip Node yang mengambil setiap font dan mencetak file teks pada baris baru yang berisi setiap karakter yang didukung oleh font tersebut. Hasilnya terlihat seperti ini:
$ less ZenAntique-Regular.txt U+20 U+21 U+22 U+23 U+24 U+25 U+26 U+27 U+28 U+29 U+2A U+2B U+2C U+2D U+2E U+2F U+30 U+31 U+32 U+33 U+34 U+35 U+36 ....
U+20 adalah spasi, U+31 adalah angka 1, dst…
Skrip ini menggunakan perpustakaan fontkit untuk introspeksi font. Keren abis.
Di direktori ini Anda dapat melihat dan memeriksa semua file 1009 txt.
Langkah 2: Subset
Dengan menggunakan Glyphhanger, kita sekarang dapat mengelompokkan setiap font dengan menambahkan satu karakter dalam satu waktu. Jadi subset pertama hanyalah karakter spasi. Subset kedua adalah spasi dan tanda seru. Subset ketiga adalah ruang,! dan “. Dan seterusnya. Subset terakhir berisi semua karakter yang didukung oleh font.
Di bawah ini adalah contoh subset 3 karakter dari font “Apakah Anda serius” yang diperiksa dan divisualisasikan di wakamaifondue.com
Gulir ke bawah lebih jauh dan kita dapat melihat karakternya (spasi, ! dan “):
Subkumpulan font yang sama diperiksa oleh alat hebat lainnya, fontdrop.info, menampilkan mesin terbang. (Ingat mesin terbang! == karakter)
Saatnya menulis naskah untuk melakukan pekerjaan itu! Skrip lengkapnya dapat ditemukan di sini, tetapi intinya adalah sebagai berikut: untuk setiap file font, baca file txt yang sesuai (karakter unicode lengkap) dan lanjutkan menjalankan glyphhanger untuk membuat subset font, menambahkan setiap karakter baru ke subset baru.
// read the list of files in the font directory
fs.readdir(fontDirectory, (err, files) => {
// process each one
files.forEach((file) => {
const fontPath = path.join(fontDirectory, file);
// check if the file is a TTF
if (file.toLowerCase().endsWith('.ttf')) {
const fontName = path.basename(file, path.extname(file));
const txtFilePath = path.join(fontDirectory, `${fontName}.txt`);
// read the Unicode characters from the corresponding .txt file
const unicodeCharacters = fs
.readFileSync(txtFilePath, 'utf-8')
.split('\n')
.map((line) => line.trim())
.filter(Boolean);
// for each character in the txt, run glyphhanger
unicodeCharacters.forEach(unicodeCharacter, index => {
subsetList.push(unicodeCharacter);
const subsetString = subsetList.join(',');
// glyph!hang!
const command = `glyphhanger --formats=woff2 --subset="${fontPath}" --whitelist=${subsetString}`;
execSync(command);
Menjalankan skripnya cukup intensif, maksud saya lambat. Saya harus memastikan saya dapat menjalankannya secara paralel dan pada titik tertentu saya memiliki banyak contoh. Saya cukup yakin itu masih membutuhkan waktu sekitar satu hari.
Langkah 3: Ringkas dan verifikasi kontinuitas
Salah satu permintaan fitur saya untuk glyphhanger adalah membiarkan Anda memilih nama file keluaran (atau mungkin saya melewatkannya). Sejauh yang saya uji, selalu membuat file font keluaran di direktori yang sama dengan sumbernya, dengan lampiran “-subset”. Itu sebabnya skrip subset saya menyalin Salin hasilnya ke direktori hasil. Hal terakhir yang dilakukan pada tahap ini adalah mengganti nama WOFF2 sehingga subset yang memiliki 1 karakter menjadi 1.woff2, subset yang memiliki 23 karakter menjadi 23.woff2, dan seterusnya. Selama proses ini, periksa kembali apakah semua subset berhasil dan tidak ada celah dalam urutannya, misalnya 24.woff2 tidak hilang. (Saya senang melaporkan bahwa saya tidak menemukan celah)
Ini adalah skrip Node yang lengkap, tidak ada yang menarik untuk disoroti.
Akhirnya, kita mendapatkan struktur direktori berikut:
Langkah 4: Konversikan ke CSV
Saatnya memasukkan beberapa data ke dalam file CSV. Skrip terakhir dan terakhir dapat ditemukan di sini. Itu hanya menulis file CSV besar dengan satu baris untuk setiap font dan satu kolom untuk setiap subset.
CSV statistik yang dihasilkan (1,3 MB) terletak di sini, dengan pratinjau di bawah:
Name,1,2,3,4,5,6,7,8,9,10... AreYouSerious-Regular,532,676,764,964,1424,1680,1964,1968,2060,... Arizonia-Regular,2352,2360,2528,2624,3040,3356,3648,4100,4124,... Armata-Regular,1632,1628,1652,1632,1632,1632,1644,1632,1652,1640,... Arsenal-Regular,2184,2196,2196,2296,2348,2468,2668,2836,3040,3072,... Artifika-Regular,2292,... ...
menganalisa
Itu titik data yang banyak, lebih dari 200.000. Apa yang harus dilakukan, apa yang harus dilakukan… Saya memutuskan untuk melakukan semacam analisis tren median.
(Omong-omong, pembaca yang budiman, di sinilah saya membutuhkan bantuan Anda. Akankah data ini menginspirasi analisis lebih lanjut?)
Saya mengambil median setiap kolom (dari 1 karakter hingga 200 karakter) dan memplotnya. Kemudian mencoba beberapa opsi trendline. Garis tren polinomial tampaknya paling masuk akal. Hasilnya adalah sebagai berikut:
Ini file .numbers (Excel Apple) saya, jika data itu menginspirasi Anda.
Apa yang kami lihat? Menambahkan lebih banyak karakter ke font akan meningkatkan ukuran file secara linier. Pada 100-130 karakter, pertumbuhan linier mungkin sedikit melambat. mungkin. Jika Anda menyipitkan mata dengan cukup hati-hati.
Berikut ini adalah tebakan liar… di luar 95 karakter US ASCII (lihat angka 95 di postingan sebelumnya), beberapa karakter Latin tambahan mungkin lebih mudah digambar berdasarkan karakter yang sudah ada pukulan Itu sudah ada di file. Misalnya, menggambar À, Á, Â, À, Ä, dan Å dapat menggunakan kembali sebagian karya A. Ini hanya tebakan karena saya belum mendesain fontnya.
pengamatan tambahan
- (min) Dari 1009 font, font dengan jumlah byte terkecil yang digunakan untuk menggambar spasi menggunakan 408 byte.
- Jumlah byte terbesar (terbesar) yang digunakan adalah karakter spasi 3,37K. Perbedaan liar.
- Pada 100 titik karakter, minimumnya adalah 2,4K, maksimumnya adalah 327K, dan mediannya adalah 13K.
- Pada 200 poin karakter kami memiliki minimal 2,6K, maksimum 333K, dan median 18K. Median ini konsisten dengan analisis sebelumnya bahwa jika font Latin Anda “harganya” lebih dari 20K, kemungkinan besar Anda akan melihatnya lagi
Berapa biaya sebuah peran?
Ini adalah pertanyaan awal saya dan saya mencoba beberapa metode median/rata-rata untuk mendapatkan jawaban ini (misalnya rata-rata median dari 1 hingga 200 karakter, menambahkan median karakter ke-201, dll.). Tidak peduli bagaimana Anda mengirisnya, itu tetap muncul biaya Satu karakter biasanya kira-kira 0,1K.
Sebagai kesimpulan bagi saya… Saya pikir ada baiknya mengatur ulang alfabet, misalnya Latin vs. Sirilik. Jika UI Anda dalam bahasa Inggris, lanjutkan dengan subsetting dan hapus semua karakter Sirilik. Jika Anda memiliki konten buatan pengguna, tetap lakukan hal yang sama, tetapi gunakan unicode-range Di CSS, subset Sirilik dimuat secara kondisional jika konten memerlukannya.
Tetapi jika Anda berpikir haruskah saya tetap menyimpan À tetapi menghapus Å…simpan saja. Kemenangan 0,1K tidak sebanding dengan rasa malu karena sesekali Å terlihat terlalu asing (menggunakan font fallback).
Faktanya, terkadang memiliki font dapat bermanfaat mengumpulkan (misal biasa + tebal) dalam unduhan file yang sama. Gaya sprite. Baik WOFF maupun WOFF2 tidak mendukung fitur ini, namun menurut saya seharusnya demikian. (Mungkin jenis file yang berbeda?) Karena jika Anda memiliki median 20K, font Latin Reguler yang berperilaku baik dan 20K huruf miring, lebih baik mengunduh 40K sekaligus daripada mengambil risiko masalah font Mitt Romney.
Komentar? Temukan saya di BlueSky, Mastodon, LinkedIn, Threads, Twitter
About The Author
