Menggunakan Fontello untuk hanya memuatkan fon ikon yang anda perlukan

Fontello: Buat Font Ikon Custom Custom

Fontello adalah perkhidmatan percuma yang mesra pengguna untuk membuat fon ikon tersuai dari imej vektor. Ia menyelaraskan pembangunan web dengan menyatukan ikon dari pelbagai projek sumber terbuka (seperti Font Awesome, Entypo, dan Typicons) ke dalam satu fail yang padat. Ini mengurangkan masa beban halaman dan meningkatkan prestasi laman web keseluruhan.

Fon ikon menawarkan beberapa kelebihan berbanding imej standard: mereka segar pada skrin resolusi tinggi, mudah digayakan dengan CSS (saiz, warna, bayang-bayang), dan lebih mudah untuk dikendalikan daripada sprite imej. Walau bagaimanapun, untuk projek-projek baru, imej SVG mungkin alternatif yang unggul, menawarkan keupayaan pelbagai warna dan visual yang lebih tajam. Jika sokongan penyemak imbas warisan atau kekangan aliran kerja memerlukan fon ikon, mengoptimumkan penggunaannya adalah penting.

Cabaran dengan perpustakaan font ikon popular seperti Font Awesome (versi 4.7, ~ 75kb) adalah bahawa kebanyakan projek hanya menggunakan sebahagian kecil daripada ikon yang tersedia. Memuatkan seluruh perpustakaan tidak perlu meningkatkan berat halaman. Fontello menyelesaikan ini dengan membolehkan anda memilih

hanya ikon yang diperlukan.

Membuat font tersuai

1. Pemilihan ikon: Pilih ikon yang diperlukan dari laman utama Fontello.
2. penyesuaian: tab "menyesuaikan nama" membolehkan anda menamakan semula ikon (mis., Tukar ke icon-facebook). Butang tetapan membolehkan pengubahsuaian awalan (mis., Menukar awalan icon-fb lalai). Anda juga boleh menyesuaikan kod ikon individu. icon-
3. Muat turun: Setelah berpuas hati, muat turun fail fon yang dihasilkan.

Mengintegrasikan font

1. Ekstrak: Ekstrak fail zip yang dimuat turun. Anda akan menemui folder "CSS," "fon", dan fail "config.json" (mengandungi konfigurasi font).
2. import (pilihan): Untuk projek sedia ada, seret fail "Config.Json" ke halaman Fontello atau importnya melalui Tetapan & GT; Import.
Penempatan fail:
3. Salin semua fail (mengekalkan struktur folder) ke dalam direktori projek anda. Kemasukan CSS CSS: Sertakan fail CSS yang dihasilkan (mis., ) dalam projek anda.
4. Penggunaan: Gunakan ikon dalam markup HTML anda dengan format social-media.css, menggantikan
dengan nama ikon.
5. menggunakan imej tersuai <i class="icon-classname"></i> icon-classname Walaupun Fontello menawarkan perpustakaan yang luas, anda boleh mengimport imej SVG tersuai. Pastikan SVG anda disediakan dengan betul: Keluarkan mengisi, warna, peraturan kompleks (seperti
mengisi), dan atribut garis lemak; Sertailah kontur menjadi garis besar tunggal.

Keuntungan Prestasi

Fontello secara drastik mengurangkan saiz fail. Dalam satu contoh, fail 4.7 fon hebat (75kb) dikurangkan kepada fail Fontello 4KB (menggunakan lapan ikon). Penjimatan berbeza -beza bergantung kepada bilangan ikon yang digunakan. Ini meminimumkan permintaan HTTP dan meningkatkan kelajuan pemuatan. Di samping itu, Fontello membolehkan awalan ikon yang konsisten merentasi pelbagai fon, memudahkan pengurusan. evenodd

Konfigurasi Lanjutan

header cors:

Jika hosting font fail pada domain yang berasingan, konfigurasikan tajuk kors dalam fail

anda:

• .htaccess
jenis font mime:

tetapkan jenis mime yang betul di

<code class="language-htaccess"><filesmatch>
  Header set Access-Control-Allow-Origin "*"
</filesmatch></code>

anda:

• Kesimpulan .htaccess
Fontello memudahkan membuat fon ikon yang ringan dan disesuaikan. Malah pengurangan saiz fail yang kelihatan kecil berkumpul untuk meningkatkan prestasi laman web dengan ketara. Pertimbangkan penggunaannya untuk mengoptimumkan aliran kerja font ikon anda.

Atas ialah kandungan terperinci Menggunakan Fontello untuk hanya memuatkan fon ikon yang anda perlukan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!