easyfonts

Font yang mudah

Easy Font menyediakan kelas CSS untuk digunakan dalam HTML sebagai <div classs="font-open-sans"></div> . Ini membuatnya lebih mudah untuk menggunakan Google Font dalam proyek Anda. Font yang mudah membuat Webfonts 2 langkah lebih mudah karena Anda tidak perlu lagi mengulangi langkah -langkah pengikut setiap kali Anda mencoba keluarga font baru:

1. Tidak perlu menghasilkan stylesheet font baru setiap kali, dan
2. Tidak perlu mengedit CSS untuk menerapkan font.

Dengan font yang mudah, Anda dapat menggunakan satu file CSS ringan untuk mengimpor semua font dalam proyek Anda, dan tidak pernah khawatir tentang mengimpor font baru.

Mengapa font yang mudah

Easy Font dikembangkan untuk memanfaatkan teknik konsolidasi host yang digunakan oleh pageCDN untuk mempercepat situs web. Tujuan awal kami adalah untuk memungkinkan situs web yang menggunakan PageCDN untuk pengiriman konten mereka juga secara opsional mengirimkan font di atas host CDN yang sama untuk mengurangi 2 pencarian DNS tambahan yang diperlukan oleh Google Fonts. Kemudian, font mudah terbukti menjadi perpustakaan yang sangat berguna untuk prototyping cepat. Jadi, kami memindahkannya ke GitHub untuk siapa saja yang tertarik untuk meng -hosting sendiri perpustakaan ini atau menggunakannya dalam kombinasi dengan fonts.google.com.

Menggunakan font yang mudah

Easy Fonts menyediakan koleksi kelas CSS untuk membantu Anda membangun situs web lebih cepat tanpa khawatir tentang memodifikasi CSS setiap kali Anda perlu menguji keluarga font baru. Gunakan referensi font mudah untuk mempelajari semua keluarga font yang tersedia dan kelas CSS yang relevan.

 < link href =" https://pagecdn.io/lib/easyfonts/fonts.css " rel =" stylesheet " />

<!-- Or load specific font files
<link href="https://pagecdn.io/lib/easyfonts/open-sans.css" rel="stylesheet" />
<link href="https://pagecdn.io/lib/easyfonts/roboto.css" rel="stylesheet" />
-->

< div class =" font-roboto " >
    < div class =" font-open-sans w600i " >
        Stuff here appears in Open Sans, bold and italic
    </ div >
    < div class =" w600 " >
        Stuff here appears in Roboto, bold
    </ div >
    < div >
        Stuff here appears in Roboto and uses inherited weight and style
    </ div >
</ div >

:)

Jika Anda menggunakan fonts.css , browser akan mengunduh hanya file font yang sebenarnya Anda gunakan di HTML Anda dan tidak akan menyia -nyiakan bandwidth pengguna dengan memuat semua font. File fonts.css itu sendiri hanya 25 kb saat dimuat dari pagecdn. PageCDN menggunakan kompresi Brotli: 11 untuk mengompres file dengan sangat erat untuk menjaga ukuran dalam batas yang dapat diterima.

Mengimpor font

dist DIST berisi file CSS untuk setiap keluarga font individu yang dapat Anda tautkan dari HTML Anda. Anda dapat mengunduh perpustakaan untuk dimainkan dengan keluarga font individu atau tautan ke file CSS langsung dari CDN. Di bawah ini adalah tautan untuk open sans . Untuk keluarga font lainnya, berikut adalah alat pencarian yang praktis.

 < link href =" https://pagecdn.io/lib/easyfonts/open-sans.css " rel =" stylesheet " />

Mengimpor semua font

Untuk menguji font yang berbeda dengan cepat, font yang mudah memudahkan untuk mengimpor semua keluarga font sekaligus. Untuk ini, Anda perlu menggunakan file dist/fonts.css atau menggunakan tautan CDN di bawah ini.

 < link href =" https://pagecdn.io/lib/easyfonts/fonts.css " rel =" stylesheet " />

Menggunakan dengan Google Fonts

Dimungkinkan untuk menggunakan font yang mudah dan google font bersama -sama. Inilah cara melakukannya.

 < link href =" https://fonts.googleapis.com/css2?family=Open+Sans:ital@0;1&display=swap " rel =" stylesheet " > 
< link href =" https://pagecdn.io/lib/easyfonts/classes.css " rel =" stylesheet " />

Mengimpor font secara dinamis

Easy Fonts memberikan informasi font dalam format JSON untuk keluarga font individu. Ini membantu Anda membangun antarmuka pemilihan font untuk tema dan pembangun situs web. JSON terletak di direktori dist/info . Anda dapat memuat informasi untuk masing-masing font atau menggunakan file JSON all-inclusive untuk seluruh koleksi Fonts.

Muat informasi dari semua font

 https://pagecdn.io/lib/easyfonts/info/fonts.json

Muat informasi dari keluarga font tunggal

 https://pagecdn.io/lib/easyfonts/info/open-sans.json

Lisensi

File font TTF di dalam dist/fonts adalah salinan file TTF yang tidak dimodifikasi di Google Fonts Github Repo di mana Anda dapat membaca informasi lisensi. Keluarga font individu memiliki file lisensi sendiri dalam dist/license . File lisensi yang relevan juga ditautkan dari setiap file CSS untuk membantu Anda dengan mudah melihat informasi lisensi.

File CSS dan JSON dalam repositori ini hanya dihasilkan dari file font dan dicakup dalam lisensi MIT. Jika Anda mengetahui masalah lisensi dengan keluarga font yang tercantum dalam repo ini, buka masalah sehingga kami dapat menyelesaikan perbedaan tersebut.