Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. News
Code

Cara termudah untuk menggunakan Font apapun yang Anda inginkan

by
Length:ShortLanguages:

Indonesian (Bahasa Indonesia) translation by Bagus Priyanto (you can also view the original English article)

CSS 3 adalah di cakrawala, dan kami semua sedang semakin bersemangat. Berkat update browser terbaru, developer bisa mulai bekerja dengan properti baru hemat waktu - seperti @font-face. Sayangnya, ketersediaan fitur ini dibatasi untuk sebagian kecil dari userbase kami secara keseluruhan. Setidaknya untuk tahun berikutnya atau begitu, kita harus terus memanfaatkan Flash dan Javascript alternatif ketika embedding font.

Untungnya, pesaing baru, Cufón, telah membuat proses luar biasa sederhana. Apa yang membuatnya berbeda? Alih-alih Flash, menggunakan campuran canvas dan VML untuk membuat font. Hanya dalam beberapa menit, saya akan menunjukkan bagaimana untuk menggunakan font apapun yang Anda inginkan dalam aplikasi web Anda. Bersemangat?




Kelebihan

  • Secepat kilat!
  • 100 kali lebih sederhana daripada siFR.
  • Berdiri dan berjalan dalam beberapa menit.
  • Tidak bergantung pada bahasa sisi server, seperti FLIR.

Kekurangan

  • Hal ini bergantung pada Javascript. Jika dinonaktifkan, font default akan digunakan.
  • Teks tidak bisa dipilih - bukan hal yang baik.
  • Anda tidak dapat menerapkan hover state untuk elemen-elemen yang dikonversi.

Langkah 1: Download Cufón

Cufon homepage

Kunjungi website Cufón's dan klik kanan pada tombol "Download" di bagian atas. Pilih "Save-as" dan letakan di desktop Anda.

Langkah 2: Mengkonversi Font

Choose A Font

Dalam rangka untuk berfungsi, kita perlu menggunakan utilitas converter font pada website. Atau, Anda dapat men-download kode sumber dan mengubah font Anda secara lokal. Untuk keperluan demonstrasi, aku telah memilih untuk menggunakan font yang menjengkelkan: "Jokerman". Catatan - pengguna Windows: Anda mungkin harus menyalin font dari folder "FONT" ke desktop untuk bekerja.

Jika diinginkan, juga upload file italic dan bold juga.

Jokerman

Langkah 2b

Selanjutnya, Anda akan perlu untuk memilih glyphs yang harus disertakan. Jangan begitu cepat untuk hanya "CHOOSE ALL". Melakukannya akan menyebabkan ukuran file JS meningkat secara dramatis. Sebagai contoh, kita mungkin tidak perlu semua Latin glyphs; jadi pastikan bahwa mereka akan dibiarkan. Dalam kasus saya, saya telah mencentang yang Anda lihat di bawah.

Glyphs

Langkah 2c

Cufón memungkinkan Anda untuk menetapkan url tertentu untuk file Anda, untuk meningkatkan keamanan. Hal ini sangat penting bahwa Anda memastikan bahwa Anda memiliki hak istimewa yang tepat untuk menggunakan font. Lihat di sini untuk meninjau persyaratan. Jika menguntungkan, ketik situs 's url ke dalam kotak ini.

Karena kita baru saja akan memulai, Anda dapat meninggalkan dua bagian akhir di nilai default. Menyetujui persyaratan, dan klik "Let's Do This". Anda akan kemudian akan disajikan dengan kotak download yang meminta Anda tempat untuk menyimpan skrip yang dihasilkan. Sekali lagi, Simpan ke desktop Anda agar mudah untuk dicari.

Download Script

Langkah 3

Folder Preview

Langkah berikutnya adalah untuk menyiapkan proyek kami. Buat folder baru di desktop Anda, menambahkan sebuah file index.html dan tarik dua Javascript file dan masukan.

Buka file index di editor kode favorit Anda, tambahkan tag HTML dasar, dan kemudian referensi file dua Javascript sebelum penutupan body tag (Anda bebas untuk menambahkannya ke bagian header juga).

Memanggil Script

Sekarang, kita perlu memutuskan teks apa yang harus diganti. Karena dokumen kami masih kosong, merasa bebas untuk memasukan tag acak dan teks. Mari kita coba mengganti font default dalam semua tag H1 dengan Jokerman.

Saat kita memanggil metode "replace", kita dapat menambahkan string yang berisi nama tag yang kita inginkan untuk diganti - dalam kasus kami, semua tag H1. Simpan file, dan melihatnya di browser Anda.

replaced

Langkah 3b

Seperti biasa, IE membutuhkan sedikit lebih untuk bermain dengan baik dengan lainnya. Jika Anda melihat Halaman ini di IE, Anda akan melihat sedikit flickr/keterlambatan sebelum font dirender. Untuk memperbaiki ini, cukup tambahkan:

Langkah 4

Mari kita bayangkan bahwa Anda ingin memiliki lebih banyak kontrol atas pemilih Anda. Misalnya, mungkin Anda tidak ingin mengubah semua tag H1, tetapi hanya yang dalam header dokumen Anda. Cufón tidak memiliki sendiri engine selector built in. Fitur ini dihilangkan untuk menjaga ukuran file sekecil mungkin. Meskipun ini mungkin tampak seperti kejatuhan pada awalnya, itu adalah benar-benar ide yang bagus. Mengingat kehadiran framework Javascript akhir-akhir ini, ada tidak perlu double-up. Kami akan meninjau dua metode untuk menargetkan elemen tertentu.

Metode 1: Javascript

Jika Anda tidak menggunakan framework JS dalam proyek Anda, kami hanya akan menggunakan:

Kode di atas menyatakan, "mendapatkan elemen yang memiliki id"header". Kemudian, menemukan semua tag H1 dalam elemen ini, dan "menggantikan" mereka dengan font baru kami.

Metode 2: jQuery

Untuk dukung-dukungan dari jQuery' selector engine, kita hanya perlu mengimpor jQuery sebelum Cufón.

Ini sederhana seperti itu! Harap dicatat bahwa Anda harus mengimpor jQuery sebelum skrip Cufón dalam rangka agar metode ini bekerja.

Selesai

Percaya atau tidak, Anda telah selesai! Dengan hanya beberapa baris kode sederhana, Anda bebas untuk menggunakan font apapun yang Anda inginkan! Pastikan Anda memiliki izin dan sesuai dengan tipe peleburan perizinan.

Perhatian utama dari sudut pandang jenis pengecoran tampaknya bahwa skrip jenis huruf yang dihasilkan oleh Cufón dapat digunakan reverse engineer jenis huruf itu sendiri.
-Cameron Moll

Apa yang pikiran Anda? Memiliki metode yang lebih baik yang saya belum akrab?

  • Berlangganan ke NETTUTS RSS Feed untuk harian web pengembangan tuts dan artikel.


Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.