Panduan kepada Ikon UI yang Lebih Baik dan Sharper dengan Font Web

Jika anda sudah biasa dengan menggunakan format imej bitmap (seperti PNG dan GIF) untuk memaparkan ikon di laman web, maka anda juga akan terbiasa dengan kekurangannya. Pertama sekali, bergantung kepada dimensi dan berapa banyak maklumat warna yang mempunyai ikon, saiz fail ikon boleh menjadi sangat besar.

Jika kami mempunyai terlalu banyak ikon untuk dimasukkan ke dalam laman web, ia juga berpotensi memperlahankan prestasi laman web kerana banyak permintaan HTTP perlu dilakukan oleh penyemak imbas. Walaupun masalah ini dapat diselesaikan dengan CSS sprite, saiz fail masih besar.

Ikon Bitmap juga mempunyai kelemahan dalam fleksibiliti dan skalabiliti; katakan kita perlu memperbesar atau mengezum ikon ke tahap tertentu, atau melihatnya melalui resolusi skrin yang sangat tinggi seperti pada paparan retina; ikon pasti bertukar menjadi kabur.

Nah, jika anda mengambil beberapa perkara di atas, anda mungkin perlu menggunakan font ikon.

Menggunakan Font Ikon

An font ikon adalah satu set ikon yang dibungkus dalam fon web yang kemudiannya boleh disematkan di laman web menggunakan @ font-face. Oleh kerana Chris pada CSS-trick telah menunjukkan, terdapat banyak faedah menggunakan font atas imej untuk menyampaikan ikon;

Font adalah objek berasaskan vektor yang, oleh sifatnya, adalah resolusi bebas, jadi ikon akan tetap segar dalam pelbagai resolusi skrin termasuk resolusi skrin yang sangat tinggi (seperti retina-level).
Ia juga berskala, membolehkan ia dibesarkan di banyak peringkat tanpa kehilangan kualiti dan ketepatan.
Oleh kerana ikon pada dasarnya adalah font, kita juga boleh mengawal warna, ketelusan, bayangan teks dan mengubah saiznya melalui helaian gaya
Kita juga boleh menghidupkan ikon dengan CSS3.
Ikon dipanggil dengan @ font-face peraturan yang telah disokong sejak seawal Internet Explorer 4 (dengan .eot).
Permintaan HTTP kurang dan saiz fail yang lebih rendah.

Berikut adalah beberapa fon ikon percuma yang boleh kita dapati:

Font Awesome
IcoMoon
Ikon Media Sosial
Ikon Yayasan Zurb

Pastikan anda telah menyemak dan mengikuti lesen sebelum membenamkannya di laman web anda untuk menghormati masa penulis dan kerja keras.

@ font-face rule

Seperti yang telah disebutkan, ikon dibenamkan menggunakan @ font-face memerintah melalui lembaran gaya yang menentukan baru keluarga font. Dalam contoh berikut kita akan menggunakan Simbol Web;

 @ font-face font-family: 'WebSymbolsRegular'; src: url ('fonts / websymbols-regular-webfont.eot'); Format format url ('fon / websymbols-regular-webfont.eot? #iefix') ('embedded-opentype'), format url ('fon / websymbols-regular-webfont.woff') ('woff'), url ('fon / websymbols-regular-webfont.ttf') format ('truetype'), url ('fonts / websymbols-regular-webfont.svg # WebSymbolsRegular') format ('svg');

Kemudian, dalam dokumen HTML, kita hanya perlu menambah aksara yang mewakili ikon, dan bukannya memohon yang baru keluarga font secara meluas dalam dokumen ini, kita boleh melakukan lebih khusus dengan menambahkan kelas tambahan kepada unsur-unsur tertentu yang harus dibaca oleh ikon, seperti demikian;

  h
 i
 j
 A
 Saya

Kembali ke lembaran gaya, kami menentukan yang baru keluarga font untuk kelas yang baru kita tambah:

 .ikon-font font-family: WebSymbolsRegular; saiz fon: 12pt;

Demo @ font-face

Menggunakan unsur-unsur Pseudo

Jika ikon diperlakukan sebagai elemen sampingan kita juga boleh menyampaikan ikon melalui pseudo-element. Dengan mengandaikan bahawa markup HTML kami adalah seperti berikut:

  Balas
 Membalas semua
 Teruskan
 Lampiran
 Gambar

Kita boleh melakukannya dengan cara ini dalam helaian gaya:

 ul.icon-font.pseudo li: before font-family: WebSymbolsRegular; margin-right: 5px;  ul.icon-font.pseudo li: nth-child (1): before content: "h";  ul.icon-font.pseudo li: nth-child (2): before content: "i";  ul.icon-font.pseudo li: nth-child (3): before content: "j";  ul.icon-font.pseudo li: nth-child (4): before content: "A";  ul.icon-font.pseudo li: nth-child (5): before content: "I";

Demo Pseudo-element

Penggunaan Unicode Persendirian

Terdapat keadaan di mana ikon tidak tertanam dalam huruf (A, B, C, D, dll.), Tetapi tertanam dalam Penggunaan Swasta Unicode untuk meminimumkan percakapan di kalangan watak-watak. Seperti di FontAwesome, penulis telah bernasib baik menambah semua kod aksara dalam helaian gaya, yang kelihatan seperti ini;

 .ikon-kaca: sebelum kandungan: "\ f0c6";

Tetapi apabila kita perlu membenamkan ikon terus ke dalam HTML, sesuatu seperti kod berikut \ f0c6 tidak akan menjadikan ikon yang tajam, kerana ia bukan watak yang sah yang dikodkan dalam HTML.

HTML memerlukan markup rujukan berangka untuk membuat aksara khas. Kami telah membahasnya sedikit dalam tutorial sebelumnya pada CSS3 Butang; watak ini dimulakan dengan gabungan tanda ampersand (&), tanda hash (#) dan a x kemudian diikuti dengan nombor heksadesimal yang mewakili watak.

Sebagai contoh, f0c6 adalah nombor perenambelasan, jadi rujukan aksara angka dalam HTML akan menjadi & # xf0c6;, dalam kod FontAwesome itu akan memaparkan ikon klip kertas, seperti itu;

Unicode Demo

Penstriman fon

Ikon dalam koleksi mungkin tidak diperlukan. Dalam kes ini, kita boleh menggugurkan aksara yang tidak digunakan dengan menyusun semula fon yang juga akan hasilkan saiz fail font yang lebih rendah. Nasib baik, terdapat alat yang berguna dari FontSquirrel untuk melakukan tugas ini dengan mudah, @ fon-face generator.

Selepas anda pergi ke halaman itu dan tambah font, pilih Pakar. Anda akan melihat lebih banyak pilihan; pilih Penyesuaian Custom.

Dalam contoh ini, kami menggunakan font Sociolico untuk memaparkan ikon media sosial di laman web kami, tetapi ikon yang kami perlukan hanyalah Dribble, Facebook dan Twitter yang masing-masing diwakili oleh watak-watak ini; d, f dan t. Jadi, letakkan aksara tersebut dalam medan input Watak Tunggal seperti berikut:

Dan kita sudah selesai. Sekarang kita boleh memuat turun fon dan dalam kes saya saiz fon telah ternyata hanya 3Kb hingga 5Kb. Juga ingat bahawa satu-satunya aksara itu akan dijadikan ikon hanya d, f dan t, manakala watak-watak lain akan menjadi hanya surat tetap.

Pemikiran Akhir

Satu perkara yang tidak boleh kita lakukan setelah amalan ini adalah menambah kesan yang sangat terperinci seperti ini kepada ikon.

Walau bagaimanapun, jika reka bentuk keseluruhan kami tidak memerlukan butiran di peringkat itu, pendekatan ini boleh menjadi cara yang lebih baik untuk melayani ikon di laman web. Ia mempunyai kelenturan, berskala, retina-siap dengan saiz fail yang sangat kecil, apa lagi yang boleh kita minta?

Terakhir, jika anda ingin menyelam lebih mendalam ke dalam topik ini, di bawah ini kami telah mengumpulkan beberapa rujukan berguna, serta demo dan kod sumber kami untuk dimuat turun.

Cara Membuat Ikon Webfont Anda Sendiri - WebDesignerDepot.com
Menampilkan Font dan Sifat Data - 24Ways
Penggunaan Pribadi Unicode - Wikipedia

Demo
Muat turun Sumber