Versi standar untuk mendefinisikan font biasanya terlihat kira-kira seperti ini:
body {
font-family: Arial, Helvetica, sans-serif;
}Di sini, font Arial diberikan ke elemen body. Jika font ini tidak tersedia di sistem pengguna, maka akan diubah ke Helvetica. Jika Helvetica juga tidak ada, maka browser akan menggunakan setidaknya satu font tanpa serif. Kontrol yang sebenarnya tidak dapat dijamin. Akhirnya, kalian tidak memiliki kontrol penuh atas hasil akhirnya. Jadi, apa yang telah kalian disusun dengan indah di GIMP atau Photoshop, mungkin akan hilang di tengah hutan font. Lebih lanjut tentang bagaimana masalah ini dapat diatasi, akan dibahas nanti.
Kembali ke versi klasik terlebih dahulu. Di bawah ini terdapat definisi khas untuk menyesuaikan tampilan dasar situs web. Melalui definisi body, kalian dapat menentukan pengaturan dasar font.
body {
font-family: Georgia, Times, "Times New Roman", serif;
color: #000;
font-size: 1.1em;
line-height: 150%;
}
p {
font-size: 1.1em;
}
Tentu saja, kalian juga dapat mendesain elemen individu pada halaman. Ini termasuk pengaturan untuk judul, teks miring, dll. Namun, kembali ke prinsip warisan CSS.
h1 {
font-size: 1.6em;
}Hasilnya dapat terlihat di browser seperti ini:
Memanfaatkan Webfonts
Masalah dengan definisi font yang konvensional jelas: Pada akhirnya, kalian tidak dapat yakin bahwa font yang kalian tetapkan benar-benar tersedia di komputer pengguna. Browser akan memilih font yang mirip dengan yang kalian inginkan jika font yang kalian tentukan tidak ditemukan. Jadi, kalian tidak memiliki kontrol penuh atas hasilnya. Di sinilah @font-face hadir dengan memberikan solusi. Dengan ini, kalian dapat secara eksplisit menentukan font mana yang akan digunakan. Ini berfungsi mirip dengan gambar. Kalian hanya perlu menentukan jalur file font.
Pada browser modern, @font-face menggunakan Webfonts WOFF. Font ini jauh lebih kecil dibandingkan format Webfont sebelumnya, yaitu EOT dan TTF.
Definisi @font-face tipikal terlihat seperti ini:
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
Nama font yang akan digunakan dituliskan pada font-family. Sampai di sini, tidak ada kekhususan sintaks yang pertama. Melalui src:url(), URL file Webfont dijelaskan. Jika ada kemungkinan bahwa font tersebut tersedia di komputer pengguna, tambahkan local secara tambahan. Local ini akan menentukan nama font tersebut.
@font-face {
font-family: "Bitstream Vera Serif Bold";
local: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
Setelah definisi @font-face, Webfonts tersebut dapat digunakan seperti biasa.
h1 {
font-family: "Bitstream Vera Serif Bold";
font-size: 1.2em;
color: #3399FF;
}Di Sini Terdapat Berbagai Webfonts
Tentu pertanyaannya, dari mana mendapatkan file Webfont yang sesuai. Google memuat berbagai Webfonts di situs http://www.google.com/fonts.
Font tersebut bisa langsung disematkan melalui halaman yang disebutkan.
Pemanggilan yang tepat seperti ini:
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine">
Di belakang font-family, Webfont yang diinginkan dituliskan. Kalian dapat menemukan nama-nama dan panggilan ini di situs Google yang disebutkan tersebut. Setelah Webfont dimasukkan, maka dapat digunakan seperti font biasa.
body {
font-family: 'Tangerine', serif;
font-size: 1.2em;
}Seseorang dapat menggunakan beberapa Webfont di situsnya. Untuk itu, pilih Webfont yang diinginkan di http://www.google.com/fonts, dan klik Tambah ke Koleksi. Setelah semua Webfont ada di Koleksi, buka Gunakan di bagian bawah halaman. Di sana akan ditampilkan semacam tachometer secara langsung.
Berdasarkan gambar ini, kalian dapat melihat dampak dari menyematkan Webfont terhadap waktu muat halaman. Dampak ini benar-benar dapat diukur dan meningkat dengan setiap Webfont tambahan.
Cara mudah untuk menggunakan beberapa Webfont yang sebelumnya telah Anda tambahkan ke koleksi Anda dapat dilihat pada contoh berikut:
<link href="http://fonts.googleapis.com/css? family=Henny+Penny|Eagle+Lake|Amarante|Plaster|Courgette" rel="stylesheet" type="text/css">
Maka setiap Webfont ditulis secara berurutan dipisahkan oleh garis vertikal. Panggilan lengkap yang sesuai dengan koleksi yang dipilih dapat dilihat di halaman Use- yang telah disebutkan sebelumnya.
Banyak Webfont menawarkan Subset seperti Latin atau Kiril. Untuk menyertakan subset tersebut secara eksplisit, Anda dapat menambahkan subset yang diinginkan sebagai nilai parameter.
http://fonts.googleapis.com/css?family=Philosopher&subset=cyrillic
Jika Anda ingin menggunakan beberapa subset ini, tulis setiap subset tersebut dipisahkan oleh koma.
http://fonts.googleapis.com/css?family=Philosopher&subset=latin,cyrillic
Namun, penggunaan Webfont ini masih menjadi perdebatan yang berbeda. Pertama-tama, saat halaman dimuat, koneksi ke server Google harus dibuat. Anda dapat menghindari ini dengan mengunduh file Webfont dan memuatnya ke server Anda sendiri. Namun, pastikan untuk selalu memperhatikan syarat penggunaan Webfont yang ingin Anda gunakan dengan cara ini.
Definisi Font dari Halaman Contoh
Berikut adalah definisi font yang akan saya gunakan untuk halaman contoh saat ini:
body {
font-family: 'Crimson Text', Helvetica, sans-serif;
color: #444;
text-decoration: none;
line-height: 1.5em;
font-size: 1.2em;
}
p {
font-size: 1.1em;
}
h1 {
font-size: 1.6em;
color: #3399FF;
}
Tentu saja, Anda dapat menambahkan elemen tambahan. Namun, dalam kasus saat ini, sintaks di atas sudah cukup.
