Teka-teki di balik susunan font-family
Semula saya hanya berencana untuk membagikan Web font family non Import atau web font standar seperti font family Arial, Verdana dan lain-lain, Setelah melalui serangkaian test, rencana semula berubah setelah memahami maksud dari susunan font family tersebut.
Lalu apa bedanya font family non Import dengan font family Import? Font family non Import seperti gambaran yang telah saya tulis di atas. Hanya dengan menambahkan nama Font, maka Font akan tampil pada element yang kita inginkan. Kalau font family Import ya seperti font-font yang ada di Google Font. Kita hanya dapat menggunakan font jika telah menambahkan link/CSS font terkait ke dalam wadah yang kita inginkan. Dan dalam link/CSSnya ada url yang akan merujuk ke hostingan file font tersebut. Itu lah kenapa saya menyebutnya font family Import.
Jadi font family non Import dan font family Import hanya sebatas istilah saya saja ya..
Bicara soal keunggulan, font family non Import tentu lebih unggul karena ringan dan sudah menjadi standar font web*. Kalau font family Import sedikit agak berat namun memiliki beragam gaya.
Namun perlu di pahami, meskipun font family non Import adalah standar font web, semua di kembalikan ke perambanan yang akan mengeksekusi tampilannnya. Sementara font family Import juga akan bergantung pada perambanan, selain itu font family Import hanya akan bekerja pada perambanan-perambanan versi tertentu.
Berikut kumpulan font family non Import yang saya rangkum dalam sebuah tabel sederhana di bawah ini.
| Nama Font | Penulisan | Pratinjau Font |
|---|---|---|
| AndaleMono | font-family: AndaleMono; | Pratinjau Penerapannya |
| Andale Mono | font-family: "Andale Mono"; | Pratinjau Penerapannya |
| Apple Gothic | font-family: "Apple Gothic"; | Pratinjau Penerapannya |
| Arial | font-family: Arial; | Pratinjau Penerapannya |
| Arial Black | font-family: "Arial Black"; | Pratinjau Penerapannya |
| Arial Narrow | font-family: "Arial Narrow"; | Pratinjau Penerapannya |
| Arial Rounded MT Bold | font-family: "Arial Rounded MT Bold"; | Pratinjau Penerapannya |
| Arial Bold | font-family: "Arial Bold"; | Pratinjau Penerapannya |
| Avantgarde | font-family: Avantgarde; | Pratinjau Penerapannya |
| Avant Garde | font-family: "Avant Garde"; | Pratinjau Penerapannya |
| Baskerville | font-family: Baskerville; | Pratinjau Penerapannya |
| Baskerville old face | font-family: "Baskerville old face"; | Pratinjau Penerapannya |
| Bitstream Vera Sans Bold | font-family: "Bitstream Vera Sans Bold"; | Pratinjau Penerapannya |
| Big Caslon | font-family: "Big Caslon"; | Pratinjau Penerapannya |
| Bitstream Charter | font-family: "Bitstream Charter"; | Pratinjau Penerapannya |
| Bitstream Vera Sans Mono | font-family: "Bitstream Vera Sans Mono"; | Pratinjau Penerapannya |
| Book Antiqua | font-family: "Book Antiqua"; | Pratinjau Penerapannya |
| Bodoni MT | font-family: "Bodoni MT"; | Pratinjau Penerapannya |
| Bookman | font-family: Bookman; | Pratinjau Penerapannya |
| Bookman Old Style | font-family: "Bookman Old Style"; | Pratinjau Penerapannya |
| Brush Script MT | font-family: "Brush Script MT"; | Pratinjau Penerapannya |
| Calibri | font-family: Calibri; | Pratinjau Penerapannya |
| Calisto MT | font-family: "Calisto MT"; | Pratinjau Penerapannya |
| Candara | font-family: Candara; | Pratinjau Penerapannya |
| Cambria | font-family: Cambria; | Pratinjau Penerapannya |
| CenturyGothic | font-family: CenturyGothic; | Pratinjau Penerapannya |
| Century Gothic | font-family: "Century Gothic"; | Pratinjau Penerapannya |
| Charcoal | font-family: Charcoal; | Pratinjau Penerapannya |
| Consolas | font-family: Consolas; | Pratinjau Penerapannya |
| Courier | font-family: Courier; | Pratinjau Penerapannya |
| Courier Bold | font-family: "Courier Bold"; | Pratinjau Penerapannya |
| Courier New | font-family: "Courier New"; | Pratinjau Penerapannya |
| Copperplate | font-family: Copperplate; | Pratinjau Penerapannya |
| Copperplate Gothic Light | font-family: "Copperplate Gothic Light"; | Pratinjau Penerapannya |
| Cursive | font-family: Cursive; | Pratinjau Penerapannya |
| DejaVu Sans Mono | font-family: "DejaVu Sans Mono"; | Pratinjau Penerapannya |
| Didot | font-family: Didot; | Pratinjau Penerapannya |
| Didot LT STD | font-family: "Didot LT STD"; | Pratinjau Penerapannya |
| Fantasy | font-family: Fantasy; | Pratinjau Penerapannya |
| Franklin Gothic Bold | font-family: "Franklin Gothic Bold"; | Pratinjau Penerapannya |
| Franklin Gothic Medium | font-family: "Franklin Gothic Medium"; | Pratinjau Penerapannya |
| Futura | font-family: Futura; | Pratinjau Penerapannya |
| Gadget | font-family: Gadget; | Pratinjau Penerapannya |
| Garamond | font-family: Garamond; | Pratinjau Penerapannya |
| Geneva | font-family: Geneva; | Pratinjau Penerapannya |
| Georgia | font-family: Georgia; | Pratinjau Penerapannya |
| Gill Sans | font-family: "Gill Sans"; | Pratinjau Penerapannya |
| Gill Sans MT | font-family: "Gill Sans MT"; | Pratinjau Penerapannya |
| Goudy Old Style | font-family: "Goudy Old Style"; | Pratinjau Penerapannya |
| Haettenschweiler | font-family: Haettenschweiler; | Pratinjau Penerapannya |
| Helvetica | font-family: Helvetica; | Pratinjau Penerapannya |
| Helvetica Inserat | font-family: "Helvetica Inserat"; | Pratinjau Penerapannya |
| Helvetica Neue | font-family: "Helvetica Neue"; | Pratinjau Penerapannya |
| Helvetica Rounded | font-family: "Helvetica Rounded"; | Pratinjau Penerapannya |
| Hoefler Text | font-family: "Hoefler Text"; | Pratinjau Penerapannya |
| Impact | font-family: Impact; | Pratinjau Penerapannya |
| Liberation Mono | font-family: "Liberation Mono"; | Pratinjau Penerapannya |
| Lucida Bright | font-family: "Lucida Bright"; | Pratinjau Penerapannya |
| Lucida Console | font-family: "Lucida Console"; | Pratinjau Penerapannya |
| Lucida Grande | font-family: "Lucida Grande"; | Pratinjau Penerapannya |
| Lucida Sans | font-family: "Lucida Sans"; | Pratinjau Penerapannya |
| Lucida Sans Typewriter | font-family: "Lucida Sans Typewriter"; | Pratinjau Penerapannya |
| Lucida Sans Unicode | font-family: "Lucida Sans Unicode"; | Pratinjau Penerapannya |
| Lucida Typewriter | font-family: "Lucida Typewriter"; | Pratinjau Penerapannya |
| Menlo | font-family: Menlo; | Pratinjau Penerapannya |
| Monaco | font-family: Monaco; | Pratinjau Penerapannya |
| Monospace | font-family: Monospace; | Pratinjau Penerapannya |
| Nimbus Roman No9 L | font-family: "Nimbus Roman No9 L"; | Pratinjau Penerapannya |
| Optima | font-family: Optima; | Pratinjau Penerapannya |
| Palatino | font-family: Palatino; | Pratinjau Penerapannya |
| Palatino LT STD | font-family: "Palatino LT STD"; | Pratinjau Penerapannya |
| Palatino Linotype | font-family: "Palatino Linotype"; | Pratinjau Penerapannya |
| Papyrus | font-family: Papyrus; | Pratinjau Penerapannya |
| Perpetua | font-family: Perpetua; | Pratinjau Penerapannya |
| Rockwell | font-family: Rockwell; | Pratinjau Penerapannya |
| Rockwell Bold | font-family: "Rockwell Bold"; | Pratinjau Penerapannya |
| Rockwell Extra Bold | font-family: "Rockwell Extra Bold"; | Pratinjau Penerapannya |
| Sans-serif | font-family: Sans-serif; | Pratinjau Penerapannya |
| Segoe | font-family: Segoe; | Pratinjau Penerapannya |
| Segoe UI | font-family: "Segoe UI"; | Pratinjau Penerapannya |
| Segoe WP | font-family: "Segoe WP"; | Pratinjau Penerapannya |
| Serif | font-family: Serif; | Pratinjau Penerapannya |
| Tahoma | font-family: Tahoma; | Pratinjau Penerapannya |
| Times | font-family: Times; | Pratinjau Penerapannya |
| TimesNewRoman | font-family: TimesNewRoman; | Pratinjau Penerapannya |
| Times New Roman | font-family: "Times New Roman"; | Pratinjau Penerapannya |
| Trebuchet MS | font-family: "Trebuchet MS"; | Pratinjau Penerapannya |
| URW Palladio L | font-family: "URW Palladio L"; | Pratinjau Penerapannya |
| Verdana | font-family: Verdana; | Pratinjau Penerapannya |
Apa perambanan kamu dapat mengeksekusi semua tampilan pratinjau fontnya? Jelas saja tidak. Pada tabel kamu bisa melihat, hanya sebagian font yang bisa di tampilkan dan sebagian lagi tidak. Font-font yang tidak dapat di tampilkan akan tetap tampil, namun jenis font yang di tampilkan di alihkan ke keluarga font utama yakni Sans-serif dan Serif.
Berikut Hasil uji coba menggunakan perambanan seperti Internet Explorer versi 11.0.9600, Google Chrome Versi 40.0.2214.115 dan Mozilla Firefox versi 35.0.1. Font yang di test adalah Arial black, Font ini bisa di eksekusi pada perambanan Internet Explorer dan Google Chrome namun tidak di dukung pada Mozilla Firefox. Berikutnya, font Gill Sans, Font ini hanya tampil pada Google Chrome namun tidak pada Internet Explorer dan Mozilla Firefox.
Semua font standar di atas sebenarnya bekerja, hanya saja semua akan di kembalikan ke perambanan yang di gunakan. Jika ingin sebuah font yang bisa tampil di semua perambanan termasuk perambanan terlawas, font yang di gunakan sebaiknya cukup Sans-serif atau Serif atau selalu menyisipkan Sans-serif atau Serif setelah font utamanya. Mungkin kamu tidak akan percaya kalau sebagian besar situs bintang lima hanya menggunakan font-family: Sans-serif.
Jadi bisa di bilang, font yang bisa di eksekusi segala jenis dan versi perambanan lebih di dominasi oleh font Sans-serif dan serif. Buktinya saja font-font yang kita ambil dari Google font. Misalnya, font-family: 'Lora', serif, Jika font Lora tidak dapat di eksekusi oleh perambanan, maka tampilan fontnya akan di alihkan ke Serif. font-family: 'Open Sans', sans-serif, Jika font Open Sans tidak dapat di eksekusi oleh perambanan, maka tampilan fontnya akan di alihkan ke Sans-serif.
0 komentar:
Post a Comment
Kolom komentar tersedia hanya untuk diskusi dan bukan sarana untuk promosi.
Komentar menggunakan media sosial seperti Facebook dan lain-lain sengaja di nonaktifkan karena sering di salahgunakan.
Mohon untuk tidak menyisipkan link promosi pada kolom komentar.