astro font picker

Astro Font Picker

Astro Font Picker adalah integrasi toolbar dev yang memungkinkan Anda mencoba berbagai font di situs Anda. Ini menggunakan Google Font untuk memuat lebih dari 1000 font open source. Gunakan tombol atas/bawah untuk dengan cepat bersepeda melalui font yang berbeda, atau pilih satu dari daftar.

Instalasi

Instalasi Otomatis:

 npx astro add astro-font-picker

Instalasi Manual:

 npm install astro-font-picker

Tambahkan yang berikut ke file astro.config.mjs Anda:

 import astroFontPicker from 'astro-font-picker' ;

export default {
  integrations : [
    astroFontPicker ( ) ,
    // other integrations
  ] ,
} ; 

Penggunaan

Astro Font Picker akan muncul sebagai ikon baru di toolbar dev, yang diaktifkan secara default di Astro 4.0 dan di atasnya.

Saring font berdasarkan jenis (opsional), lalu pilih keluarga font. Font akan diterapkan pada elemen tubuh situs Anda.

Jika Anda memiliki keluarga font yang diterapkan pada elemen yang lebih rendah dari elemen tubuh, itu tidak akan menimpa font tersebut kecuali Anda mengaktifkan Override All Styles .

Petunjuk: Anda dapat menggunakan tombol panah atas/bawah untuk dengan cepat bersepeda melalui font.

Diaktifkan

Sakelar ini mengontrol apakah font yang dipilih diterapkan ke halaman. Diaktifkan secara default.

Mengesampingkan semua gaya

Sakelar ini akan mengganti semua gaya font-family di situs Anda dengan font yang dipilih. Tanpa ini diaktifkan, setiap keluarga font yang diterapkan pada elemen yang lebih rendah dari elemen tubuh tidak akan ditimpa.

Alasan utama untuk memiliki Override All Styles sakelar dinonaktifkan adalah untuk mempertahankan gaya font elemen atau bagian spesifik dari situs Anda. Dengan cara ini, ketika Anda menggunakan pemetik font untuk memilih font untuk area lain, itu tidak akan mengesampingkan font yang telah Anda putuskan.

Output font CSS

Ini adalah tautan Stylesheet dan CSS yang dapat Anda salin dan tempel ke situs Anda untuk menginstal font secara permanen. Misalnya:

Di elemen head Anda:

 < link rel =" stylesheet " href =" https://fonts.googleapis.com/css2?family=Itim " />

Di CSS Anda:

 h1 {
    font-family : Itim , cursive;
}

Lihat di Google Fonts

Tautan ini akan membuka font yang dipilih di Google Fonts.

Pengaturan disimpan dalam penyimpanan sesi

Semua pengaturan (diaktifkan, override, tipe font, dan keluarga font) disimpan dalam penyimpanan sesi, sehingga tidak hilang ketika halaman disegarkan selama pengembangan.

Lainnya

Proyek ini didasarkan pada perpustakaan fontable, yang merupakan pemilih font mandiri yang dapat digunakan di situs web mana pun.