webfont generator

Generator Font Web

Satu font masuk, semua font web keluar.

Tujuan dari alat ini adalah untuk mengotomatiskan pembuatan format font ramah web dan aturan CSS @font-face dari file font sewenang-wenang, tanpa harus bergantung pada layanan web atau membutuhkan koneksi jaringan. Alat ini dapat menghasilkan URL data sebaris jika diperlukan.

Lihat artikel menggunakan @font-font di css-tricks.com untuk informasi lebih lanjut tentang memaksimalkan kompatibilitas font tertanam.

QuickStart

./setup # Fetch and build third-party libraries
./bin/generate-webfonts MyFont.ttf -o assets/ # Convert a font 

Penggunaan

Script driver generate-webfonts . Pada dasarnya, ia menerima file font sebagai argumennya dan memuntahkan semua font yang dikonversi ke direktori. Ini juga dapat menghasilkan CSS untuk aturan @font-face yang sesuai juga.

 ./bin/generate-webfonts -o assets MyFont.ttf --css MyFont.css

Perintah di atas, yang menggunakan format output default, menghasilkan file berikut:

• MyFont.css
• assets/MyFont.woff
• assets/MyFont.woff2
• assets/MyFont.ttf
• assets/MyFont.eot
• assets/MyFont.svg

File MyFont.css akan berisi yang berikut:

 @font-face {
  font-family : 'MyFont' ;
  src : url ( 'assets/MyFont.eot' );
  src : url ( 'assets/MyFont.eot?#iefix' ) format ( 'embedded-opentype' ) ,
       url ( 'assets/MyFont.woff2' ) format ( 'woff2' ) ,
       url ( 'assets/MyFont.woff' ) format ( 'woff' ) ,
       url ( 'assets/MyFont.ttf' ) format ( 'truetype' ) ,
       url ( 'assets/MyFont.svg#MyFont' ) format ( 'svg' );
}

Secara konseptual, dengan daftar file input dan daftar format output, konverter akan berusaha untuk memenuhi semua persyaratan format output dengan menyalin file input yang cocok dan mengonversi file untuk mengisi celah. Karena keterbatasan dalam konverter font yang mendasarinya, beberapa format menengah yang tidak diminta dapat dihasilkan.

Perintah akan menghindari menghasilkan file dalam format output tertentu jika file yang cocok dengan format itu sudah terdaftar sebagai salah satu input. Dalam hal ini, file input hanya akan disalin ke direktori tujuan (atau dibiarkan sendiri, jika sudah ada di direktori output). Jika file seperti itu tidak terdaftar dalam argumen, itu akan ditimpa dengan file yang baru dikonversi, bahkan jika sudah ada di direktori output.

Lihat opsi di bawah ini untuk penggunaan yang lebih lanjut.

Sintaksis

Script bin/generate-webfonts menerima daftar file font sebagai input dan sejumlah opsi:

-o --output

Direktori tujuan untuk file yang dikonversi. Bahkan jika hanya font inline yang dihasilkan, direktori tujuan diperlukan untuk menyimpan file perantara.

-f --format

Daftar format output yang dipisahkan secara koma. Format yang mungkin adalah:

• ttf
• Woff
• Woff2
• eot
• SVG
• OTF

Format apa pun yang sufiks dengan :inline akan menyebabkan font diinline dalam file CSS sebagai URL data yang dikodekan base64, daripada URL ke file.

Daftar format default adalah eot,woff2,woff,ttf,svg .

-c --css

Jalur untuk file CSS yang dihasilkan. Gunakan - untuk stdout. Jika dihilangkan, tidak ada CSS yang dihasilkan.

-p --prefix

Awalan jalur font yang digunakan dalam CSS yang dihasilkan. Misalnya, jika stylesheet Anda disajikan dari css/ dan font Anda disajikan dari fonts/ , maka Anda ingin mengatur awalan ke ../fonts/ . Awalan default adalah nama direktori output.

--font-family

Nama keluarga font yang digunakan dalam file CSS. Default adalah nama dasar dari file input pertama.

--verbose

Tunjukkan output verbose saat berjalan.

-v --version

Versi tampilan.

Format yang didukung

generate-webfonts mendukung format font berikut:

• ttf
• Woff
• Woff2
• eot
• SVG
• OTF

Ini dapat dikonversi ke dan dari salah satu format yang tercantum di atas, dengan satu pengecualian: ia tidak dapat mengonversi EOT ke format lain.

Alat pihak ketiga

Generator memanfaatkan tiga pustaka/alat pihak ketiga untuk mengkonversi font. Karena tidak ada alat tunggal yang mendukung semua format font, pekerjaan generator adalah mencari tahu rantai konverter yang baik untuk digunakan untuk mengonversi antara dua format font. Di bawah kap, itu sebenarnya diimplementasikan sebagai masalah jalur terpendek pada grafik ketergantungan.

Alat pihak ketiga yang digunakan adalah:

• FontForge, program editor font gratis, serba guna, dan skrip
• Sfntly oleh Google, perpustakaan Java open-source yang pernah bertenaga google font
• Konverter WOFF2 Google

FontForge mendukung membaca dan menghasilkan sejumlah format font, meskipun tidak memiliki dukungan untuk format EOT atau WOFF2. Perpustakaan Sfntly yang sangat cepat dapat mengonversi font TTF menjadi EOT atau WOFF, yang mencakup salah satu celah ini. Konverter WOFF2 dari Google juga digunakan untuk mengonversi antara format WOFF2 dan TTF.

Pengaturan

Seperti disebutkan di atas, jalankan ./setup untuk mengunduh dan membangun perpustakaan pihak ketiga. Running ./setup akan memeriksa repositori konverter SFNTLY dan WOFF2 secara lokal di mana generate-webfonts dapat menemukannya. Instal FontForge menggunakan manajer paket Anda atau langsung dari situs web mereka.

Proses pengaturan mengasumsikan lingkungan *nix. Saat ini tidak ada dukungan untuk menyiapkan alat ini di Windows.

Perintah berikut diperlukan untuk menjalankan skrip pengaturan:

• git
• java dan javac
• mvn (Maven)

Script generate-webfonts itu sendiri membutuhkan Python 3.

Menutup pikiran

Tolong konversi secara bertanggung jawab! Hormat Hak Cipta Pencipta Font.