Tag <font> termasuk salah satu (Deprecated tags) dimana saat ini sudah jarang digunakan karena sudah ada alternatif pengganti yang lebih baik untuk tag tersebut. Untuk Tag <font> sebagai gantinya digunakan atribut style atau CSS. Untuk penjelasan singkat tentang CSS ini bisa di baca di Belajar CSS.
Pada tulisan sebelumnya tentang Belajar HTML dengan topik Forman font HTML telah dibuat beberapa contoh format font dengan menggunakan tag <font>. Di tutorial HTML ini kita akan melupakan tag tersebut dan beralih menggunakan atribut style.
Untuk mengganti jenis font digunakan properti font-family:
<p style="font-family:Georgia">Tulisan dengan font-family Georgia</p>
Untuk membuat tulisan miring digunakan properti font-style:
<p style="font-style:italic">Membuat tulisan miring</p>
Hasil:
Membuat tulisan miring
Untuk membuat tulisan tebal digunakan properti font-weight:<p style="font-weight:bold">Membuat tulisan tebal</p>
Hasil:
Membuat tulisan tebal
Untuk mengatur ukuran font digunakan properti font-size:<p style="font-size:16px">Tulisan dengan ukuran font 16px</p>
Hasil:
Tulisan dengan ukuran font 16px
<p style="font-size:16px">Tulisan dengan ukuran 16px</p>
<p style="font-size:100%">Tulisan dengan ukuran 100%</p>
<p style="font-size:1em">Tulisan dengan ukuran 1em</p>
<p style="font-size:12pt">Tulisan dengan ukuran 12pt</p>
Hasil:
Tulisan dengan ukuran 16px
Tulisan dengan ukuran 100%
Tulisan dengan ukuran 1em
Tulisan dengan ukuran 12pt
Untuk membuat warna font digunakan properti color:<p style="color:blue">Tulisan ini akan berwarna biru</p>
Hasil:
Tulisan ini akan berwarna biru
<p style="color:rgb(0,128,0)">Membuat warna tulisan dengan Nilai RGB</p>
<p style="color:#008000">Membuat warna tulisan dengan Kode Hexadecimal</p>
<p style="color:green">Membuat warna tulisan dengan Nama Warna</p>
Hasil:
Membuat warna tulisan dengan Nilai RGB
Membuat warna tulisan dengan Kode Hexadecimal
Membuat warna tulisan dengan Nama Warna
Atribut style dapat memiliki beberapa properti dengan dibatasi oleh tanda titik koma.
<p style="font-family:Georgia;font-size:16px;font-weight:bold;">Contoh tulisan dengan font-family, font-size dan font-weight</p>
Kemudian style tersebut diatas dapat di persingkat dengan menggunakan properti font.
<p style="font:bold 16px Georgia">Contoh tulisan dengan properti font.</p>
Selamat mencoba.