Fontimize

Fontimisasi

Font yang mudah dioptimalkan (subset) untuk mesin terbang spesifik yang diperlukan untuk teks atau HTML Anda!

Apakah Anda khawatir tentang ukuran pengunduhan awal situs web Anda? Membutuhkan megabyte unduhan, dan Anda telah mengoptimalkan dan meminimalkan CSS dan JavaScript dan gambar Anda, tetapi melihat beberapa font besar? Fonttimize adalah untuk Anda! Alat ini menganalisis file HTML dan CSS Anda (atau teks apa pun) dan membuat subset font , file font yang hanya berisi karakter atau mesin terbang yang sebenarnya digunakan.

Dalam praktiknya Anda dapat mengecilkan ukuran unduhan font Anda hingga 10% atau kurang dari aslinya.

Fonttimize menggunakan TTF2Web, dan banyak terima kasih dan kredit kepada penulis perpustakaan yang fantastis itu.

Contoh hasil

Perpustakaan ini awalnya dibuat untuk situs web pribadi saya. Ini menggunakan empat font TTF dengan total lebih dari 1,5MB. (Ini tidak biasa: satu untuk judul, satu untuk teks normal dengan varian untuk miring, ditambah yang keempat untuk kekhasan tipografi, dropcaps.)

Setelah menjalankan fontimisasi, ukuran total untuk semua font yang digabungkan adalah 76kb.

1.5MB ke 76KB adalah penghematan 95,2%! Ini memiliki dampak nyata pada waktu awal untuk mengunduh halaman di situs, ditambah dampak besar pada rendering: Sebelumnya, beban awal situs akan memberikan font serif generik, dan kemudian merender kembali beberapa detik kemudian setelah font diunduh, yang tampak sangat buruk. Sekarang, Anda akan mendapatkan font baru segera atau sebelum Anda memperhatikan dan situs akan terlihat benar sejak awal.

Penggunaan

Fontimize adalah perpustakaan Python, dan dapat dimasukkan dalam perangkat lunak Python Anda atau digunakan secara berdiri sendiri pada baris perintah.

Perpustakaan

Mulailah dengan menginstal dan mengimpor fonttimisasi:

 $ python3 -m pip install fontimize

Dalam skrip Anda:

 import fontimize

Untuk menguraikan satu set file HTML pada disk, dan file CSS yang mereka gunakan, dan mengekspor font baru (secara default dalam folder yang sama dengan font asli) yang hanya berisi mesin terbang yang digunakan dalam html:

 all_html_files = [ 'input/one.html' , 'input/two.html' ]

font_results = fontimize . optimise_fonts_for_files ( all_html_files )

print ( font_results [ "css" ])
# Prints CSS files found used by any of the HTML input files:
#  { 'input/main.css',
#    'input/secondary.css' }

print ( font_results [ "fonts" ])
# Prints pairs mapping the old fonts to the new optimised font generated for each. Use this to, eg, rewrite your CSS
# By default exports to the same folder as the input files; use `font_output_dir` to change
#  { 'input/fonts/Arial.ttf': 'input/fonts/Arial.FontimizeSubset.woff2',
#    'input/fonts/EB Garamond.ttf': 'input/fonts/EB Garamond.FontimizeSubset.woff2' }

print ( font_results [ "chars" ]
# Prints the set of characters that were found or synthesised that the output fonts will use
#   { ',', 'u', '.', '@', 'n', 'a', '_', 'l', 'i', 'h', 'Q', 'y', 'w', 'T', 'q', 'j', ' ', 'p', 'm', 's', 'o', 't', 'c' ... }

print ( font_results [ "uranges" ]
# Prints the same set of characters, formatted as ranges of Unicode characters
#   U+0020, U+002C, U+002E, U+0040, U+0051, U+0054, U+005F, U+0061-007A ...

Referensi penuh

optimise_fonts_for_files()

Ini kemungkinan metode yang ingin Anda gunakan.

Font Mengoptimalkan / Subset berdasarkan satu set file input pada disk, dan (secara otomatis) file CSS eksternal yang referensi file HTML apa pun. File diuraikan sebagai HTML jika mereka memiliki ekstensi file .htm atau .html (teks yang terlihat pengguna diekstraksi dan CSS diuraikan), jika tidak file diperlakukan sebagai teks. Mengembalikan daftar file CSS yang ditemukan dan peta file font baru ke yang baru dioptimalkan.

Parameter:

• html_files : list[str] : daftar jalur, yang masing -masing adalah file html. Masing -masing akan dianalisis.
• font_output_dir = "" : Path to Where the Subseted Fonts harus ditempatkan. Secara default ini kosong ( "" ), yang berarti menghasilkan font baru di lokasi yang sama dengan font input. Karena font baru memiliki nama yang berbeda (lihat subsetname , parameter berikutnya) Anda tidak akan menimpa font input. Tidak ada pemeriksaan jika subset font sudah ada sebelum ditulis.
• subsetname = "FontimizeSubset" : Font yang dioptimalkan diubah namanya dalam format OriginalName.FontimizeSubset.woff2 . Penting untuk membedakan font yang disubruk dari font asli dengan semua mesin terbang. Anda dapat mengubah nama subset output ke string lain yang valid pada sistem file Anda.
• verbose : bool = False : jika True , memancarkan informasi diagnostik tentang file CSS, font, dll yang ditemukan dan dihasilkan.
• print_stats : bool = True : mencetak informasi untuk ukuran total pada disk font input, dan ukuran total font yang dioptimalkan, dan penghematan dalam persen. Atur ini ke False jika Anda ingin berjalan diam -diam.
• fonts : list[str] = [] : Daftar jalur ke file font. Ini ditambahkan ke font apa pun yang ditemukan metode melalui CSS. Anda biasanya akan menentukan ini jika Anda meneruskan file teks daripada HTML
• addtl_text : str = "" : karakter tambahan yang harus ditambahkan ke yang ditemukan di file

Kembali:

• dict[str, typing.Any]
• return_value["css"] -> Daftar file CSS unik yang digunakan file HTML
• return_value["fonts"] -> dict Where keys() adalah file font asli, dan nilai untuk setiap kunci adalah file font pengganti yang dihasilkan. Anda dapat menggunakan ini untuk memperbarui referensi ke file font asli. Perhatikan bahwa fontimizer tidak menulis ulang input CSS.
• return_value["chars"] -> satu set karakter yang ditemukan saat mem -parsing input
• return_value["uranges] -> rentang unicode untuk karakter yang sama:" U+1000-2000, U+2500-2501 ", dll. CATATAN Angka kedua di setiap pasangan tidak memiliki" U+"-ini cocok

optimise_fonts_for_html_contents()

Mirip dengan optimise_fonts_for_html_files , kecuali inputnya adalah html sebagai string (misalnya <head>...</head><body>...<body> ). Tidak menguraikan untuk menemukan file CSS yang digunakan (dan dengan demikian font yang digunakan), jadi Anda juga perlu memberikan daftar file font untuk dioptimalkan.

Parameter:

• html_contents : list[str] : Daftar string html. Teks akan diekstraksi dan digunakan untuk menghasilkan daftar mesin terbang untuk font yang dioptimalkan.
• fonts : list[str] : Daftar jalur pada sistem file lokal Anda ke file font untuk dioptimalkan. Ini bisa menjadi jalur relatif.

Parameter lain ( fontpath , subsetname , verbose , print_stats ) identik dengan optimise_fonts_for_html_files .

Kembali:

• dict Where keys() adalah file font asli, dan nilai untuk setiap kunci adalah file font pengganti yang dihasilkan

optimise_fonts_for_multiple_text()

Mirip dengan optimise_fonts_for_html_contents , kecuali input adalah daftar string python. Isi string tersebut digunakan untuk menghasilkan mesin terbang untuk font yang dioptimalkan: akan ada mesin terbang untuk setiap karakter unik dalam string input (jika font input berisi mesin terbang yang diperlukan.)

Lulus dalam daftar file font (parameter fonts ) sebagai file font input untuk dioptimalkan berdasarkan teks.

Parameter:

• texts : list[str] : Daftar string Python. Font yang dihasilkan akan berisi mesin terbang yang digunakan string ini.

Parameter lain ( fonts , fontpath , subsetname , verbose , print_stats ) dan nilai pengembalian idential ke optimise_fonts_for_html_contents .

optimise_fonts()

Ini adalah metode utama; Semua metode di atas berakhir di sini. Dibutuhkan string teks Python Unicode dan daftar jalur ke file font untuk mengoptimalkan, dan membuat subset font yang hanya berisi mesin terbang unik yang diperlukan untuk teks input.

Parameter:

• text: str : String Python Unicode. Satu set karakter unicode unik dihasilkan dari ini, dan file font output akan berisi semua mesin terbang yang diperlukan untuk membuat string ini dengan benar (dengan asumsi font berisi mesin terbang untuk memulai.)

Parameter lain ( fonts , fontpath , subsetname , verbose , print_stats ) dan nilai pengembalian identik dengan optimise_fonts_for_html_contents dan optimise_fonts_for_multiple_text .

Baris perintah

Alat Commandline dapat digunakan mandiri atau diintegrasikan ke dalam pipa pembuatan konten.

Penggunaan Sederhana:

python3 fontimize.py file_a.html file_b.html

Ini mem -parsing HTML, ditambah file CSS eksternal yang direferensikan, untuk menemukan kedua mesin terbang dan font yang digunakan. Ini menghasilkan file font baru di lokasi yang sama dengan file font input.

python3 fontimize.py --text "The fonts will contain only the glyphs in this string" --fonts "Arial.tff" "Times New Roman.ttf"

Ini hanya menghasilkan mesin terbang yang diperlukan untuk string yang ditentukan, dan membuat versi baru Arial dan Times New Roman dalam format WOFF2 di lokasi yang sama dengan file font input.

Referensi

Masukan

• Biasanya, lulus file input. HTML akan diuraikan untuk CSS dan font yang direferensikan; Semua file lain akan diuraikan sebagai teks.
• --text "string here" ( -t ): Glyphs yang digunakan untuk membuat string ini akan ditambahkan ke mesin terbang yang ditemukan dalam file input, jika ada yang ditentukan. Anda harus meneruskan file input atau teks (atau keduanya), jika tidak kesalahan akan diberikan.
• --fonts "a.ttf" "b.ttf" ( -f ): Daftar opsional font input. Ini akan ditambahkan ke yang ditemukan yang dirujuk melalui HTML/CSS.

Keluaran

• --outputdir folder_here ( -o ): Direktori tempat menempatkan file font yang dihasilkan. Ini pasti sudah ada.
• --subsetname MySubset ( -s ): Frasa yang digunakan dalam nama file font yang dihasilkan. Penting untuk membedakan font output dari font input, karena (menurut definisi sebagai subset) mereka tidak lengkap.

Lainnya

• --verbose ( -v ): output informasi terperinci saat memproses
• --nostats ( -n ): tidak mencetak informasi tentang hasil yang dioptimalkan di akhir

Tes

Tes unit dijalankan melalui tests.py dan menggunakan file dalam tests . Perhatikan bahwa ini menghasilkan file output baru dalam folder testsoutput .

Folder tests berisi beberapa font yang dilisensikan di bawah lisensi font terbuka SIL.

Catatan

Saya menggunakan fontimisasi sebagai bagian dari generator situs statis khusus untuk membangun situs saya. Ini beroperasi sebagai langkah terakhir, mengoptimalkan font berdasarkan file HTML yang dihasilkan yang disimpan di disk. Nilai pengembalian dari fontimisasi - seperti font yang dibuatnya dan file CSS yang dianalisis - kemudian digunakan untuk menulis ulang CSS dan menunjuk ke font yang baru dioptimalkan.

(Menulis ulang CSS saat ini bukan fitur yang disediakan oleh Fonttimize; Harap buat masalah atau permintaan tarik jika Anda menginginkannya. Saat ini, perpustakaan menghasilkan file font baru dan mengembalikan pemetaan (baik sebagai kamus atau output teks) yang menampilkan file font yang sudah lama. Disk, Anda harus melakukannya secara eksplisit.

• Secara default, fonts yang baru disubel akan dinamai dengan akhiran "fontimizersubset", mis. Arial.FontimizerSubset.woff2 . Anda dapat menyesuaikan nama font subset menggunakan parameter metode subsetname atau parameter baris perintah --subsetname=Foo . Meskipun disarankan untuk menggunakan nama subset untuk menghindari membingungkan font yang dioptimalkan dengan font asli (yang berisi semua mesin terbang), Anda dapat menggunakan nama apa pun yang Anda sukai. Nama default "FonMizersubset" hanyalah saran untuk mengarahkan orang lain kembali ke perpustakaan ini, jika mereka menjumpainya. Tidak perlu mempertahankan nama ini, dan Anda bebas menggunakan frasa yang berbeda.

• CSS Pseudo-Elements:
  Fonttimize parse CSS untuk kedua font yang secara eksplisit digunakan dan untuk setiap mesin terbang yang ditampilkan di layar. Ini termasuk mesin terbang di CSS pseudo-elemen seperti :before dan :after . Jika teks atau karakter didefinisikan dalam elemen pseudo ini, mereka akan dimasukkan dalam font subset.

• CSS inline:
  Fonttimize saat ini tidak menguraikan inline CSS dalam file HTML. Diasumsikan bahwa CSS eksternal sedang digunakan, yang ditemukan melalui tag <link> di bagian <head> dari dokumen HTML. Fonttimize kemudian akan menganalisis file CSS untuk font dan mesin terbang. Jika Parsing Inline CSS akan membantu, silakan angkat masalah.

• Karakter tambahan:
  Ketika kutipan tunggal atau ganda ditemukan dalam teks input, font subseted juga akan menyertakan kutipan kiri dan kanan yang sesuai. Demikian pula, jika dasbor ditemukan, subset akan mencakup en-dash dan EM-dash.

• Sangat bagus (tetapi tidak diperlukan) bahwa jika Anda menggunakan fontimizer, untuk menautkan ke https://fontimize.daveon.design/ atau repo github ini. Itu untuk mengarahkan orang lain ke alat. Terima kasih banyak :)