Teknik dan Alat Praktis dan Pengganti Gambar Dinamis

Ketika datang ke desain web, kreativitas desain tidak boleh ditahan oleh pilihan terbatas font web yang didukung yang kita sebut font yang aman untuk web. Desainer harus memiliki kebebasan untuk menggunakan font apa pun yang mereka sukai pada judul dan konten.

Pada tahun 2005, penggantian gambar dinamis dipopulerkan dengan teknik yang disebut Scalable Inman Flash Replacement (sIFR). Dikembangkan oleh Shaun Inman, sIFR memanfaatkan Javascript dan Adobe Flash untuk memungkinkan perancang web menggunakan font khusus apa pun yang mereka sukai di situs web dan tetap mempertahankan visibilitas bagi mereka yang tidak memiliki font itu. Dan saat web terus berkembang, hari ini kami memiliki lebih banyak solusi alternatif menggunakan berbagai teknologi, untuk berjaga-jaga jika Anda bukan penggemar Flash..

Tanpa basa-basi lagi, mari kita lihat beberapa teknik untuk mencapai Penggantian Gambar Dinamis.

Teknik yang Biasa Digunakan

Berikut adalah beberapa teknik yang paling umum dilakukan untuk penggantian gambar dinamis.

Scalable Inman Flash Replacement (sIFR)

sIFR adalah salah satu metode paling populer untuk menyematkan font khusus di situs web. Ini menggunakan Javascript dan Flash untuk menghasilkan jenis huruf khusus untuk situs web Anda dan memungkinkan jenis huruf yang dikonversi dapat dipilih. Selain itu, jenis huruf yang dikonversi tetap sebagai teks dalam kode sumber sehingga mesin pencari masih dapat merayapnya.

sIFR 2 (disarankan) adalah rilis stabil saat ini, namun jika Anda ingin mengimplementasikan sIFR, Anda juga harus tahu itu siFR 3 beta juga tersedia untuk diunduh. Mungkin sedikit buggy tapi setidaknya itu memecahkan masalah perluasan font sIFR 2.

Alat untuk sIFR yang mungkin berguna:

sIFRvaultsIFRvault adalah tempat penyimpanan font sIFR yang dapat Anda unduh.
Generator sIFRAlat daring yang memungkinkan Anda membuat file sIFR .swf dengan beberapa klik mouse Anda. Cukup unggah font TTF dari font yang ingin Anda konversi, pratinjau, dan unduh.
Ubah font menjadi sIFRUnggah font .TTF dan situs web ini akan mengubahnya menjadi file Flash sIFR.

sIFR Lite

SIFR asli adalah 22rb, jadi Dave memutuskan untuk mengolahnya menggunakan pendekatan yang lebih berorientasi objek, dan hasilnya? 3x lebih kecil dari 3,7k.

PHP + CSS Dynamic Text Replacement (P + C DTR)

Seperti namanya, ini adalah metode penggantian teks yang menggunakan PHP dan CSS yang menggunakan metode asli yang dijelaskan oleh Steward Rosenberger. Ini juga merupakan peningkatan dari versi sebelumnya yang dikembangkan oleh R. Marie Cox itu tidak mendukung pembungkus teks dan tag batin. Hal keren lainnya tentang P + C DTR adalah, teks gambar dapat disesuaikan dengan tag CSS.

typeface.js

Apa yang membuat typeface.js khusus adalah bahwa mereka hanya menggunakan Javascript untuk menanamkan font dan gaya khusus dapat lebih lanjut disesuaikan dengan HTML dan CSS, tidak diperlukan Flash. Ini adalah open source dan mendukung sebagian besar browser yang kita gunakan hari ini, apakah itu Safari, Firefox, IE (6 dan lebih tinggi).

Secara pribadi setelah beberapa percobaan dengan typeface.js, kami pikir mungkin ada beberapa ruang potensial untuk perbaikan. Pertama, font cenderung membuat sedikit berbeda di antara browser yang berbeda. Jika Anda menggunakan typeface.js, kami sarankan Anda melakukan pemeriksaan lintas browser sebelum menganggap apa yang Anda lihat di Firefox akan seperti yang Anda lihat di Safari. Teks juga tidak dapat dipilih dengan typeface.js.

Font khusus di typeface.js tidak dikompilasi; artinya pengguna dapat mengunduh font. Itu bisa menyebabkan masalah hak cipta. Disarankan agar Anda memeriksa dengan seksama untuk memastikan font yang Anda gunakan ok untuk didistribusikan.

Cufon

Tidak diperlukan Flash, Cufon adalah alternatif yang bagus untuk sIFR dan sangat mudah diterapkan. Pertama, Anda menggunakan generator Cufon untuk menghasilkan dan mengkustomisasi font yang Anda inginkan, kemudian Anda memasukkan Javascript Cufon dalam kode sumber Anda dan Anda memberi tahu skrip penyeleksi mana yang Anda ingin font disesuaikan..

Masalah terbesar dengan Cufon adalah masalah hukum penggunaan font khusus ini secara online. Karena itu tertanam dalam Javascript, itu dapat dengan mudah robek oleh siapa saja yang melihat kode sumber. Font khusus Cufon tidak dapat dipilih, itu yang mematikan lainnya.

Facelift

Juga dikenal sebagai Pengganti Gambar Facelift (FLIR), itu adalah metode hebat lain untuk sIFR yang tidak memerlukan Flash. Sepertinya sangat alternatif lain adalah masalah Flash sIFR.

Facelift menggunakan PHP dan Perpustakaan GD PHP. Mereka mewarisi masalah warisan penggantian font kustom - tidak dapat memilih teks. Selain itu, kami pikir itu bagus juga.

Metode lainnya

Teknik-teknik di atas mungkin lebih banyak digunakan, tetapi kami juga memperhatikan beberapa cara lain untuk memberikan konversi teks Anda menjadi tipografi khusus yang indah.

Jenis Pilih

KetikPilih memanfaatkan typeface.js, jQuery, kanvas, toDataURL, properti latar belakang CSS, dan teks overlay nyata untuk memberikan jenis huruf khusus di situs web Anda. Pemilihan teks berfungsi pada Firefox, Safari dan bahkan Chrome tetapi tidak untuk IE.

Penggantian Gambar Swf (swfIR)

swfIR memberi Anda kemampuan untuk menerapkan bermacam-macam efek visual ke salah satu atau semua gambar di situs web Anda. Misalnya, Anda dapat menambahkan gambar di situs web Anda dan swfIR akan menambahkan batas yang lebih bulat, memutar posisi, atau bahkan menambahkan bayangan ke sana..

Sembilan Teknik untuk Penggantian Gambar CSS

Ini bukan pengganti teks dinamis, tetapi Chris Coyier menunjukkan sebanyak sembilan teknik CSS yang berbeda untuk mengganti teks dengan gambar; masing-masing dengan kartu laporan mencantumkan kondisi - bagaimana jika gambar hidup / mati, CSS hidup / mati.

Pembakar Font

Pembakar Font memanfaatkan Scalable Inman Flash Replacement (sIFR) untuk mengubah judul Anda menjadi font khusus. Yang perlu Anda lakukan adalah menemukan font, memilihnya dan memasukkan kode ke kepala dan judul Anda akan diubah dalam waktu singkat.

WordPress + Penggantian Gambar Dinamis

Jika Anda adalah pengguna WordPress yang mencari solusi penggantian gambar dinamis untuk judul atau bahkan konten blog Anda, kemungkinan ada plugin untuk mereka. Berikut adalah beberapa plugin pengganti teks yang kami ketahui.

Plugin sIFR WordPress - WP sIFRWP sIFR dibuat untuk menghilangkan komplikasi dari mendapatkan font khusus di situs WordPress. Dengan WP sIFR, Anda hanya perlu mengunggah file font SWF Anda ke direktori plugin dan kemudian login, aktifkan, dan konfigurasikan gayanya semua di panel Pengaturan..

Plugin Cufon WordPress - WP-CufonSatu-satunya hal yang harus Anda lakukan adalah mengonversi fontfile Anda dan mengunggahnya ke direktori plugins. Anda dapat mengaktifkan objek yang ingin Anda ganti di Menu Admin WordPress.

Plugin Wordpress Replacment Image Replacment (FLIR)FLIR untuk WordPress ramah SEO dan hanya menampilkan gambar di browser jika JavaScript diaktifkan. Kode HTML / XHTML Anda tetap tidak berubah sehingga tag kepala Anda dapat dibaca oleh mesin pencari dan halaman dapat dibaca oleh mereka yang tidak memiliki JavaScript.

Panel Kontrol Font BurnerItu Pembakar Font Plugin Control Panel memungkinkan Anda untuk dengan mudah menambahkan salah satu dari 1000+ font gratis yang tersedia di situs web Font Burner ke tema WordPress Anda.