font template
1.0.0
Templat font ilustrator adobe yang memungkinkan Anda untuk mengedit bentuk mesin terbang (karakter .woff2 sama sekali dalam satu file .ai (atau dalam .woff .ai masing- .ttf yang terpisah jika Anda mau), kemudian mengekspornya .otf .svg file, dan menghasilkan font.
Versi indah dari tutorial ini di situs web saya
font_template.ai (unduh): Templat font ilustrator adobe untuk simbol dasar dan panjang dan huruf Latin (cakupan CP1252 yang signifikan), masing -masing mesin terbang memiliki artboard yang terpisah, sehingga Anda dapat dengan mudah mengekspor masing -masing sebagai file glyph SVG individu.font_template_single.ai (unduh): Template font ilustrator adobe untuk satu mesin terbang. Jika Anda mau, Anda dapat menggunakan file ini alih -alih (atau bersama dengan) font_template.ai .batch_import_svg.py (buka, lalu Ctrl + S / CMD + S untuk menyimpan): skrip Python yang dapat mengimpor beberapa file mesin terbang individu SVG ke dalam file font .sfd fontForge (dan secara opsional dapat mengubahnya menjadi file font produksi, yaitu .otf , .ttf , .woff , .woff2 .) (Alih-alih mengunduh file, Anda juga dapat git clone https://github.com/tomchen/font-template.git atau unduh seluruh repositori)
;
Buka font_template.ai , gambar mesin terbang Anda di lapisan "karya seni glyph".
(Tidak masalah jika mesin terbang Anda sebagian dan sedikit di luar Artboard -nya.)
Setelah selesai menggambar mesin terbang, sembunyikan "Contoh Glyph". Klik "File" -> "Ekspor" -> "Ekspor untuk Layar".
Pilih mesin terbang yang ingin Anda ekspor (jangan pilih yang kosong), pilih format "SVG", klik "Ekspor Artboard".
File SVG glyph individu yang diekspor ada di dalam folder "SVG", masukkan ke dalam folder yang juga berisi file skrip batch_import_svg.py .
Untuk pengguna Windows, jalankan C:Program Files (x86)FontForgeBuildsfontforge-console.bat ,* Navigasi ke folder menggunakan cd <FOLDER_PATH> dan jalankan skrip python menggunakan ffpython batch_import_svg.py . File font output.sfd akan dihasilkan.
Untuk pengguna Mac atau Linux, cd <FOLDER_PATH> dan jalankan fontforge -lang=py -script batch_import_svg.py .
(*: untuk 64 bit windows Program Files (x86) , untuk Program Files 32 bit windows itu)
Buka file font output.sfd dengan fontForge. Sesuaikan lebar mesin terbang (gunakan tombol shift untuk memilih semua mesin terbang yang ingin Anda sesuaikan lebar, lalu, di menu, pilih "metrik" -> "lebar otomatis", atau, klik dua kali mesin terbang dan seret secara manual garis perbatasannya).
Di menu, pilih "File" -> "Hasilkan Font ..."
Ketik nama font, pilih format font (biasanya truetype atau opentype), klik tombol "Hasilkan". Kemudian Anda memiliki font komputer buatan sendiri!
Anda dapat berhenti di sini dan tidak perlu membaca bagian berikut.
Template font ini dapat digunakan untuk menggambar mesin terbang tunggal dan menghasilkan glif SVG tunggal.
Gambar berikut menggambarkan panduan mesin terbang tunggal.
Di FontForge, pilih mesin terbang atau buka mesin terbang, lalu klik "File" -> "Impor ...", pilih "SVG" sebagai "Format", pilih file SVG Liblyph tunggal Anda dan impor.
Modifikasi file batch_import_svg.py Jika Anda ingin membuka file font .sfd yang ada, atau menghasilkan .otf , .ttf , .woff , .woff2 secara langsung, alih -alih melakukannya dengan fontForge gUI.
Di menu FontForge, klik "File" -> "Execute Script"
Salin dan Tempel: SelectWorthOutputting(); foreach Export("%e_%n.svg"); endloop;
Pilih tombol radial "FF".
Klik tombol "OK".
Jika bentuk mesin terbang berisi beberapa jalur yang tumpang tindih, akan lebih baik untuk bergabung dengan mereka (tutorial YouTube yang bagus) daripada mengelompokkannya atau menjadikannya jalur majemuk. Langkah ini membantu menghindari masalah rendering font untuk jalur yang tumpang tindih. Namun, untuk jalur terpisah (tidak tumpang tindih), jangan ragu untuk menggunakan "grup" ( Ctrl + g ) atau "jalur majemuk" ("objek" -> "jalur majemuk" -> "make").
Alih-alih membuat file font dengan fontForge dari Scrach, kadang-kadang ide yang baik untuk menggunakan file font bebas dan open-source yang ada sebagai font basis dan fallback. Font open-source khas dengan cakupan mesin terbang yang baik adalah sumber Adobe sans pro dan sumber serif pro. Pilih berat seperti "biasa", tergantung pada kebutuhan Anda. Buka file font dengan fontForge, edit untuk membuat font Anda. Namun, jika Anda menggunakan font yang ada, Anda mungkin perlu mengedit tidak hanya AZ, AZ tetapi juga ligatur mereka seperti "FF" dan "FI".
Saat Anda memilih mesin terbang di jendela "Ekspor untuk Layar" Illustrator, Anda tidak boleh memilih mesin terbang kosong, jika tidak, Anda akan melihat "Saya minta maaf file ini terlalu rumit untuk saya pahami (atau salah)" peringatan ketika Anda menjalankan skrip batch_import_svg.py . Namun demikian, itu tidak akan berhenti dan akan terus menghasilkan file output.sfd .
Pada 19 Agustus 2020, file font_template.ai proyek diperbarui (banyak nama Artboard diubah, misalnya 44 , diubah menjadi 44 comma ) untuk memperbaiki masalah nama file unicode. Jika Anda telah mengunduh font_template.ai sebelum 2020-08-19 dan membuat file .ai Anda berdasarkan versi lama, Anda dapat secara opsional ** memperbarui nama artboard di font_template.ai Anda menggunakan salah satu metode berikut:
.ai lama Anda ke font_template.ai terbaru Anda ke terbaru/other_files/update_artboard_names.js di Illustrator: Buka file .ai Anda di Adobe Illustrator, di menu, klik "File" -> "Script" -> "Script lainnya ...", temukan dan pilih file update_artboard_names.js yang diunduh, klik "Buka" Setelah pembaruan, hapus dan meregenerasi file Glyph SVG Anda di folder SVG .
(**: Jika Anda menggunakan versi lama tetapi mesin terbang Anda terbatas pada karakter ASCII dasar, maka tidak akan menemukan masalah yang terkait dengan nama file SVG Unicode, Anda dapat memilih untuk tidak memperbarui file .ai Anda)
Setelah Anda memiliki font sendiri, Anda dapat menggunakannya di halaman web Anda (termasuk situs web, aplikasi web, aplikasi desktop lintas-platform yang dikompilasi elektron, atau bahkan reaksi aplikasi seluler Native / NativeScript).
Font Anda dapat berupa font alfabet atau font monokrom. Jika Anda ingin menampilkan ikon warna, gunakan SVG atau PNG.
Letakkan file font .woff2 dan .woff Anda ( my_font.woff2 dan my_font.woff dalam contoh) di folder CSS Anda dan masukkan kode berikut dalam file CSS Anda (mendukung IE9+):
@font-face {
font-family : 'MyFont' ;
src : url ( 'my_font.woff2' ) format ( 'woff2' ) ,
url ( 'my_font.woff' ) format ( 'woff' );
} (Jika Anda tidak ingin mendukung IE apa pun, Anda dapat menghapus file .woff dan hanya menggunakan .woff2 (format terkecil dan terbaru)))
Kemudian gunakan nama font-family khusus Anda ('myfont' dalam contoh):
. my-special-font {
font-family : 'MyFont' , sans-serif;
color : yellow;
font-size : 20 px ;
}Html:
< span class =" my-special-font " > B </ span > Jika itu adalah font ikon monokrom, huruf B dalam kode HTML akan ditampilkan sebagai pemetaan ikon monokrom ke huruf B. Meskipun pengembang web biasanya menggunakan karakter di area penggunaan pribadi Unicode seperti U+EEA0 dan U+F2BB alih-alih surat Latin dan Karakter Latin lainnya yang biasa digunakan melalui Semantik / Seo / Khusus Aksesbilitas, tidak ada masalah aksesibilitas, tidak ada yang berkaitan dengan aksesibilitas. Untuk mengatasi masalah tersebut, Anda dapat secara semantik mengidentifikasi ikon font dengan menambahkan role dan atribut aria-label ke elemen html Anda:
< span role =" img " aria-label =" A bag " class =" my-special-font " > B </ span > Lisensi MIT untuk semua yang ada di repositori ini
