Penggantian Imej Dinamik Teknik dan Alat Praktikal

Apabila ia datang kepada reka bentuk web, kreativiti reka bentuk tidak boleh ditahan oleh pilihan terhad fon web yang disokong yang kami panggil fon selamat web. Pereka harus mempunyai kebebasan untuk menggunakan mana-mana fon yang mereka suka pada tajuk dan kandungan.

Pada tahun 2005, penggantian imej dinamik telah menjadi popular dengan teknik yang dipanggil Penggantian Flash Inman berskala (sIFR). Dibangunkan oleh Shaun Inman, sIFR mengambil kesempatan daripada Javascript dan Adobe Flash untuk membolehkan pereka web menggunakan mana-mana fon langganan yang mereka suka di laman web dan masih mengekalkan penglihatan kepada mereka yang tidak mempunyai font itu. Dan sebagai web terus berkembang, hari ini kami mempunyai lebih banyak penyelesaian alternatif menggunakan pelbagai teknologi, sekiranya anda bukan peminat Flash.

Tanpa berlengah-lengah lagi, mari kita lihat beberapa teknik untuk mencapai penggantian imej dinamik.

Teknik yang biasa digunakan

Berikut adalah beberapa teknik yang paling kerap dipraktikkan untuk penggantian imej dinamik.

Penggantian Flash Inman berskala (sIFR)

sIFR adalah salah satu kaedah yang paling popular untuk memasukkan fon langganan pada laman web. Ia menggunakan Javascript dan Flash untuk menjana typeface tersuai untuk laman web anda dan membolehkan penanda buku diubah menjadi pilihan. Selain itu, typeface yang ditukar kekal sebagai teks dalam kod sumber jadi enjin carian masih boleh merangkak mereka.

sIFR 2 (disyorkan) adalah pembebasan stabil semasa, namun jika anda mencari untuk melaksanakan sIFR, anda juga harus tahu itu siFR 3 beta juga boleh dimuat turun. Ia mungkin kereta kecil tetapi sekurang-kurangnya ia menyelesaikan masalah pengembangan fon sIFR 2.

Alat untuk sIFR yang mungkin berguna:

sIFRvaultsIFRvault adalah repositori fon sifr yang boleh anda muat turun.
Penjana sIFRAlat dalam talian yang membolehkan anda membuat fail sIFR .swf dengan beberapa klik tetikus anda. Muat naik fon TTF fon yang anda ingin tukar, pratonton dan muat turun.
Menukar fon ke sIFRMuat naik fon .TTF dan laman web ini akan menjadikan mereka ditukar ke fail Flash sIFR.

sifr Lite

SIFR asal adalah 22k, jadi Dave memutuskan untuk mengolah semulanya menggunakan pendekatan yang lebih berorientasikan objek, dan hasilnya? 3x lebih kecil pada 3.7k.

PHP + CSS Penggantian Teks Dinamik (P + C DTR)

Seperti namanya, ini adalah kaedah penggantian teks yang menggunakan PHP dan CSS yang menggunakan kaedah asal yang diterangkan oleh Steward Rosenberger. Ia juga merupakan peningkatan dari versi sebelumnya yang dibangunkan oleh R. Marie Cox yang tidak menyokong pembungkusan teks dan tag batin. Satu lagi perkara yang sejuk mengenai DTR P + C ialah, teks imej boleh disesuaikan dengan tag CSS.

typeface.js

Apa yang membuat typeface.js khusus ialah mereka hanya menggunakan Javascript untuk menanamkan fon dan gaya tersuai yang boleh disesuaikan dengan HTML dan CSS, tidak diperlukan Flash. Ia adalah sumber terbuka dan menyokong kebanyakan penyemak imbas yang kami gunakan hari ini, sama ada Safari, Firefox, IE (6 dan ke atas).

Secara peribadi selepas beberapa eksperimen dengan typeface.js, kami fikir mungkin terdapat beberapa ruang yang berpotensi untuk penambahbaikan. Pertama, fon cenderung menyebabkan sedikit berbeza di antara pelayar yang berbeza. Sekiranya anda menggunakan typeface.js, kami cadangkan anda melakukan pemeriksaan silang pelayar sebelum mengandaikan apa yang anda lihat di Firefox akan menjadi perkara yang anda lihat di Safari. Teks juga tidak boleh dipilih dengan typeface.js.

Fon tersuai dalam typeface.js tidak dikumpulkan; bermakna pengguna dapat memuat turun fon. Itu boleh menyebabkan masalah hak cipta. Adalah dinasihatkan agar anda menyemak dengan teliti untuk memastikan fon yang anda gunakan adalah ok untuk pengagihan semula.

Cufon

Tiada Flash diperlukan, Cufon adalah alternatif yang hebat untuk sIFR dan ia agak mudah dilaksanakan. Mula-mula, anda menggunakan penjana Cufon untuk menghasilkan dan menyesuaikan fon yang anda mahu, maka anda memasukkan Javascript Cufon dalam kod sumber anda dan anda memberitahu skrip yang pemilih yang anda mahu fon disesuaikan.

Masalah terbesar dengan Cufon akan menjadi isu undang-undang menggunakan fon langganan secara dalam talian. Oleh kerana ia tertanam dalam Javascript, ia boleh dengan mudah digagalkan oleh sesiapa sahaja yang melihat kod sumber. Fon adat Cufon tidak boleh dipilih, itulah yang lain dimatikan.

Facelift

Juga dikenali sebagai Penggantian Imej Teratas (FLIR), ia adalah satu lagi kaedah yang hebat untuk sIFR yang tidak memerlukan Flash. Nampaknya alternatif lain adalah memukul isu Flash sIFR.

Facelift menggunakan PHP dan PHP GD Library. Mereka mewarisi masalah warisan pengganti font tersuai - tidak dapat memilih teks. Selain itu, kami fikir ia juga hebat.

Lebih banyak kaedah

Teknik-teknik di atas mungkin lebih banyak digunakan, tetapi kami telah melihat beberapa cara lain untuk memberikan teks anda menjadi tipografi tersuai yang indah.

Jenis Pilih

TypeSelect memanfaatkan typeface.js, jQuery, kanvas, toDataURL, sifat latar belakang CSS dan teks yang benar-benar overlayed untuk memberikan typeface tersuai di laman web anda. Pemilihan teks berfungsi pada Firefox, Safari dan bahkan Chrome tetapi bukan IE.

Penggantian Imej Swf (swfIR)

swfIR memberi anda keupayaan untuk menggunakan pelbagai kesan visual kepada mana-mana atau semua imej di laman web anda. Contohnya, anda boleh menambah sebarang imej di laman web anda dan swfIR akan menambah sempadan bulat, putar kedudukan atau tambah bayang-bayang kepadanya.

Sembilan Teknik untuk Penggantian Imej CSS

Ini bukan pengganti teks dinamik, tetapi Chris Coyier menunjukkan sebanyak sembilan teknik CSS yang berbeza untuk menggantikan teks dengan imej; masing-masing dengan kad laporan menyenaraikan keadaan - bagaimana jika imej hidup / mati, CSS hidup / mati.

Pembakar Huruf

Pembakar Huruf memanfaatkan Penggantian Flash Inman Scalable (sIFR) untuk menukar tajuk anda ke fon langganan. Apa yang anda perlu lakukan ialah mencari fon, memilih dan memasukkan kod ke dalam kepala dan tajuk anda akan berubah dalam masa yang singkat.

Pengganti Imej Dinamik + WordPress

Sekiranya anda seorang pengguna WordPress yang mencari penyelesaian gantian imej dinamik untuk tajuk atau kandungan blog anda, kemungkinan terdapat plugin untuk mereka. Berikut adalah beberapa plugin penggantian teks yang kita tahu.

Plugin sIFR WordPress - WP sIFRWP sIFR telah dibuat untuk menghapuskan komplikasi daripada mendapatkan fon langganan pada laman WordPress. Dengan WP sIFR, anda hanya perlu memuat naik fail font SWF anda ke direktori plugin dan kemudian log masuk, aktifkannya, dan konfigurasikan gayanya semua dalam panel Tetapan.

Cufon WordPress Plugin - WP-CufonSatu-satunya perkara yang perlu anda lakukan ialah menukarkan fontfiles anda dan memuat naiknya ke dalam direktori plugin. Anda boleh mendayakan objek yang anda ingin diganti di Menu Pentadbir WordPress.

Plugin Wordpress Facelift (FLIR) Wordpress PluginFLIR untuk WordPress adalah SEO yang mesra dan hanya memberi imej dalam pelayar jika JavaScript diaktifkan. Anda kod HTML / XHTML tetap tidak berubah meninggalkan tag kepala anda dibaca oleh enjin carian dan halaman yang dibaca oleh mereka tanpa JavaScript.

Panel Kawalan Font BurnerThe Pembakar Huruf Plugin Control Panel membolehkan anda dengan mudah menambah mana-mana fon percuma 1000+ yang terdapat di laman web Font Burner untuk tema WordPress anda.