Ikon Webfont: Alternatif kepada Imej

Mari kita hadapi: Membuat banyak ikon kecil menggunakan perisian penyuntingan imej adalah membosankan. Menguruskan fail kecil yang tidak terhitung atau sprite imej pengirim dan mengiris dalam CSS menambah kerumitan yang tidak perlu. Syukurlah, HTML5 menawarkan penyelesaian yang lebih baik: WebFonts. Set fon boleh termasuk ikon grafik bersama aksara standard. Walaupun Wingdings adalah contoh yang biasa, pilihan percuma seperti ikonik menawarkan utiliti yang lebih besar dan menyediakan sampel HTML dan CSS. Lihat halaman Demo Ikon Webfont ...

Selepas memilih atau membuat font anda, tukarnya ke pelbagai format untuk keserasian penyemak imbas yang optimum. Penjana @font-face di fontsquirrel.com memudahkan proses ini, menyediakan fail zip dengan semua fon yang diperlukan dan CSS. Import fon ke CSS anda seperti ini:

@font-face {
    font-family: "IconicStroke";
    src: url("iconic_stroke.eot");
    src: url("iconic_stroke.woff") format("woff"), 
    url("iconic_stroke.ttf") format("truetype"), 
    url("iconic_stroke.otf") format("opentype"), 
    url("iconic_stroke.svg#iconic") format("svg");
}

Semasa anda

boleh terus memasukkan aksara ikon dalam HTML anda (mis., 'R' untuk ikon RSS Ikon), ini boleh menghalang akses pembaca skrin. Elemen pseudo CSS adalah pendekatan yang lebih inklusif:

html anda:

<a href="https://www.php.cn/link/50d7f99947b472cc889d58845b9d23e2">RSS Feed</a>

CSS anda:

.rss:before {
    font-family: "IconicStroke";
    content: "r";
}

Kelebihan ikon Webfont:

• skalabiliti dan penyesuaian: saiz semula, recolor, dan memohon kesan CSS dengan mudah. ​​
• Keserasian yang luas: Sokongan penyemak imbas yang sangat baik, termasuk penyemak imbas yang lebih tua seperti IE6.
• Kecekapan: Fail font tunggal sering melepasi pelbagai fail imej dalam kecekapan.

Kekurangan ikon Webfont:

• Batasan tunggal warna: Ikon sememangnya berwarna tunggal (walaupun CSS3 dapat mengurangkan ini).
• kerumitan generasi font: Membuat fon tidak semudah menghasilkan PNGs atau SVGs.
• Pertimbangan saiz fail: Untuk sebilangan kecil ikon, fail imej mungkin lebih kecil.

Secara keseluruhan, ikon Webfont menawarkan kelebihan yang ketara dan dapat mengurangkan masa pembangunan secara substansial. Adakah anda memasukkannya ke dalam projek anda? Lihat halaman Demo Ikon Webfont ...

Soalan -soalan yang sering ditanya:

Seksyen FAQ yang disediakan sudah berstruktur dan komprehensif. Tiada perubahan diperlukan untuk mengekalkan kejelasan dan ketepatan.

Atas ialah kandungan terperinci Ikon Webfont: Alternatif kepada Imej. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!