belajarwebdesign.com
belajarwebdesign.com |
Posted: 28 Mar 2012 04:40 AM PDT Terdengar simpel dan sangat mendasar, tetapi inilah yang sering saya keluhkan. Isu-isu legalitas dan kompatibel atau tidaknya sebuah font untuk ditampilkan dalam sebuah website sangat-sangat membuat saya stres tingkat tinggi. Mungkin terasa hiperbola dari kalimat saya yang terakhir, ya, tapi itulah kenyataannya. Kata kompatibel yang saya maksud adalah tampil sempurnanya sebuah font terhadap semua media (browser, OS, mobile). Artikel TerkaitSejarah SingkatSedikit cerita tentang Web Typography. Awalnya setiap browser memiliki standar format font masing-masing dari "TrueDoc", "EOT", "OTF/TTF", akhirnya muncul "Web Open Font Format" atau biasa disingkat "WOFF". Dalam perjalanannya, Web typography banyak mengalami kendala, terutama masalah "Lisensi". Dengan menyertakan/embed @font-face maka dengan mudah orang akan mendapatkan font tersebut. Hal ini dikarenakan akses menuju font yang dimaksud berupa tautan, dan setiap orang bisa mengakses font tersebut. Bertolak belakang dengan cara yang mudah tadi, artis typography merasa kuatir dengan cara tersebut. Ini berarti orang akan dengan mudah mendapatkan font mereka secara gratis. Tak perlu saya jelaskan panjang lebar, tentunya kita tahu, mereka juga cari makan. So, we must respect them too. Kita juga harus menyiapkan biaya ekstra untuk lisensi font mereka (untuk yang berbayar). Jika kita ingin dihargai oleh mereka kita juga harus menghargai mereka. Toh sama-sama menguntungkan. Mungkin saya cukupkan untuk latar belakang dari Web Typography ini, jika ingin membaca lebih lanjut silahkan baca tautan dari referensi yang saya sertakan. Generic FontsAda 5 generic fonts yang digunakan dalam web. Font tersebut adalah: Sans-Serif, Serif, Monospace, Cursive, dan Fantasy. Kita tidak perlu menambahkan font ekstra untuk kelima font tersebut, karena secara default browser bisa merender font-font tersebut. Hasil Render MacOS Hasil Render Linux Hasil Render Windows Hasil Render iPhone Hasil Render iPad Hasil Render Mozilla Mobile Hasil Render Android Mobile Hasil Render Android Tab Gambar diatas adalah hasil render font dari pelbagai media. Setiap media memiliki generic font masing-masing. Kita para developer dituntut untuk membuat font tersebut tampil identik di setiap media. Dasar Styling FontPada dasarnya, untuk menampilkan sebuah font type untuk sebuah desain situs cukup melampirkan jenis font tersebut ke sebuah elemen HTML. Berikut adalah cara dasarnya p { font-family: sans-serif;} .header { font-family: serif;} Tentu saja jika hanya menyertakan salah satu diantara 5 font dasar, maka sebuah situs akan terlihat monoton. Maka untuk mempercantik desain situs perlu menambahkan font diluar font dasar. Namun, perlu diperhatikan juga kompatibilitas font tersebut, apakah dapat tampil di semua browser dengan identik atau tidak. Jika tidak, harus ada font alternatif yang serupa tapi tak sama untuk tampil identik di semua browser dan segala jenis OS dan media. Berikut contoh dasar menyertakan font yang kita targetkan beserta alternatif fontnya. p { font-family: helvetica, arial, verdana, sans-serif;} .header { font-family: "times new roman", times, georgia, serif;} Kode css diatas dapat dibaca sebagai berikut
Kode diatas hanyalah contoh. Untuk pemula, saya sarankan untuk memperhatikan bentuk font yang akan disertakan berada dalam kelompok mana. Untuk referensi, saya sertakan tabel bentuk font menurut kelompoknya. Untuk kompatibilitas font berdasarkan dari OS, saya sertakan tabel dibawah. Tabel-tabel diatas berisi tentang generic font yang didukung oleh OS. Perhatikan dengan seksama font-family yang cocok dengan font yang sesuai dengan desain. Mungkin untuk pengelompokan font, ikuti tabel-tabel sebelumnya. Embed Font EksternalJika generic font dirasa kurang untuk mempercantik desain situs. Maka kita perlu embed font eksternal. Dalam melakukan embed ini, perhatikan juga tentang "bagaimana format font yang dapat tampil identik disemua browser". Dengan tetap menyertakan font-family agar jika format font tidak dapat diterima oleh browser, ada alternatif font lain yang dapat ditampilkan (setidaknya bentuk font tidak lari terlalu jauh). Dasar embed font sangatlah mudah, seperti membuat tautan dalam HTML. @font-face { font-family: font-sans-serif; src: url(fonts/sans-serif-custom.ttf); font-size: normal; font-weight: normal;} p { font-family: fontsans-serif, arial, helvetica, sans-serif; } Dalam melakukan embed font, yang terpenting adalah dimana letak font tersebut, sisanya menyesuaikan. Font family yang terdapat di @font-face adalah alias nama font yang akan kita embed. Cara paling aman untuk embed font adalah menggunakan pihak ketiga. Sejak saya menjadi front-end web dev, saya hanya tahu 2 situs yang menyediakan layanan ini, mungkin teman-teman ada yang mau menambahkan, saya persilahkan. Berikut saya sertakan hasil render dari masing-masing browser di 3 OS berbeda. Linux Windows MacOS Mobile Font yang saya gunakan adalah “Droid” untuk Squirrel font dan “Share” untuk Google font. Khusus untuk Google font, saya bereksperimen untuk menggunakan langsung pada server Google dan font yang saya unduh sendiri dalam format woff. Untuk Squirrel font dengan tulisan "Font Mix". Font family ini menggunakan kode sebagai berikut. @font-face { font-family: 'DroidSerifRegular'; src: url('droid/DroidSerif-Regular-webfont.eot'); src: url('droid/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'), url('droid/DroidSerif-Regular-webfont.woff') format('woff'), url('droid/DroidSerif-Regular-webfont.ttf') format('truetype'), url('droid/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg'); font-weight: normal; font-style: normal; } Mungkin cukup sekian artikel tentang webfont kali ini. Semoga bermanfaat Referensi: http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work |
You are subscribed to email updates from belajarwebdesign.com To stop receiving these emails, you may unsubscribe now. | Email delivery powered by Google |
Google Inc., 20 West Kinzie, Chicago IL USA 60610 |
Tidak ada komentar:
Posting Komentar