Tapi... kenapa kita harus menambahkan font secara eksternal? Karena tidak semua komputer memiliki font-font yang sama, dan ada kalanya kita ingin menggunakan font yang lebih sesuai dengan tema halaman web kita namun font tersebut tidak terinstall pada komputer. Kalaupun sudah terinstall pada komputer kita, belum tentu font tersebut terinstall pada komputer lain bukan?
Sa~ Bagaimana kita menambahkan font dengan css?
Contohnya, saya memiliki sebuah folder dengan nama font. Di dalam folder tersebut ada sebuah file index.html, folder css dan folder fonts. Pada folder fonts terdapat sebuah file font dengan nama DinosaursAreAlive.ttf dan pada folder css terdapat sebuah file css dengan nama style.css. Sekarang, bagaimana agar index.html bisa menggunakan font DinosaursAreAlive.ttf?
1. Kita deklarasikan fons tersebut, caranya tulis script berikut pada fiile style.css :
@font-face{
font-family: 'Dino';
src: url('../fonts/DinosaursAreAlive.ttf');
}
font-family: 'Dino'; berarti kita membuat sebuah font dengan nama Dino. Sedangkan src: url('../fonts/DinosaursAreAlive.ttf'); adalah alamat font berdasarkan file css. Meskipun nantinya file style.css akan di embed oleh index.html, akan tetapi alamat url-nya tetap berdasarkan file css. Kecuali scrip css tersebut ditulis langsung dari index.html.
2. Pada index.html, buat seperti ini:
<!doctype html>
<html>
<head>
<title>Font</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<style type="text/css">
body{
font-family: Dino;
font-size: 46px;
}
</style>
</head>
<body>
<p>Congratulation! You are Alive!</p>
</body>
</html>
3. Dan hasilnya adalah:
thx gan
BalasHapusGan, kok ga ada iklannya? thanks yaww...
BalasHapusTerimakasih…
BalasHapusInfonya sangat menarik
======
Izin share info juga
======
Bagi yang ingin belajar
membuat aplikasi Android dan Website, Rekomendasi tempatnya di http://www.lauwba.com dijamin sampai BISA!
& GRATIS mengulang sampai BISA.
Pilihan Kelasnya ada kelas :
* IN HOUSE TRAINING khusus pengembangan SDM
* Kelas
PRIVATE waktu serta materinya bisa menyesuaikan kebutuhan Anda
* Kelas REGULER diadakan tiap Pekan.
Info lebih
lengkapnya di : http://www.lauwba.com
GRATIS Konsultasi 1x24 Jam
via WA/Telp : 08 222 1 777 206
=====
kursus web jogja, kursus android
Terimakasih…
BalasHapusInfonya sangat menarik
======
Izin share info juga
======
Bagi yang ingin belajar membuat aplikasi Android dan Website, Rekomendasi tempatnya di http://www.lauwba.com dijamin sampai BISA! & GRATIS mengulang sampai BISA.
Pilihan Kelasnya ada kelas :
* IN HOUSE TRAINING khusus pengembangan SDM
* Kelas PRIVATE waktu serta materinya bisa menyesuaikan kebutuhan Anda
* Kelas REGULER diadakan tiap Pekan.
Info lebih lengkapnya di :? http://www.lauwba.com
GRATIS Konsultasi 1x24 Jam
via WA/Telp : 08 222 1 777 206
=====
kursus web jogja, kursus android jogja