Format Font HTML

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 Format 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>

Hasil:

Tulisan dengan font-family Georgia

Untuk melakukan eksperimen lebih lanjut anda bisa mengganti jenis font-nya dengan font-font yang bisa dilihat di Jenis-jenis Font Family untuk CSS

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

Untuk pengaturan ukuran font-size dapat menggunakan satuan px, em, % atau pt. Kode HTML berikut akan menghasilkan ukuran font yang sama.

<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

Untuk kode warna bisa menggunakan nilai RGB, Hexadecimal atau Nama Warna. Kode HTML berikut akan menghasilkan warna tulisan yang sama.

<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

Ikuti link berikut untuk melihat Kode Hexadecimal dan Nama Warna atau gunakan tool kode warna untuk melihat nilai RGB.

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>

Hasil:

Contoh tulisan dengan font-family, font-size dan font-weight.

Kemudian style tersebut diatas dapat di persingkat dengan menggunakan properti font.

<p style="font:bold 16px Georgia">Contoh tulisan dengan properti font.</p>

Hasil:

Contoh tulisan dengan properti font.


» Tutorial selanjutnya:

« Tutorial sebelumnya:

Posted in HTML Tutorial by Masim man

Post a comment

22 Responses to “Format Font HTML”

  1. lumayan lengkap tutorialnya dan mudah dipahami, kebetulan saya punya blog jdi harus ngerti coding2 html sedikit…

  2. rean said:

    trims tipsnya, udah tak coba untuk footer dan berhasil…My Blog | Simple

  3. Model Rumah said:

    Simple tapi sangat mudah dimengerti, selama ini saya selalu kesulitan membuat struktur coding html untuk warna dan huruf ini. terutama peletakan titik, koma pakai titik dua atau sama dengan. thx share

  4. Tutorialnya bagus mas. Sangat membantu buat saya yang lagi belajar ngeblog. Boleh saya masukan link web nya di blog saya mas?

  5. li bebek said:

    terimakasih tutorialnya,sekarang aku sudah bisa merubah ukuran dan warna font di blogku.
    salam blogger.

  6. fadhil said:

    Terima kasih info nya admin

  7. profil said:

    terma kasih sob atas informasinya

  8. Kita Punya said:

    Siap dicoba gan tutorialnya.. Terimakasih nih, salam kenal.

  9. Makasih banyak, saya numpang sedot ilmunya yang ini (style=”font-family:Arial;font-size:22px;font-weight:bold;”) buat judul posting

  10. Ummu shafeya said:

    Wah, ini tutorial yang saya cari-cari…
    Belajar HTML mulai dari dasar.
    Mau nanya sekalian, format huruf ini bisa menyesuaikan nggak sama device nya mas? Misalnya pc atau smartphone atau hape biasa, beda nggak?
    Makasih mas…

    • Masim man said:

      Klo format hurufnya tidak berubah mas kecuali bila fontnya tidak ada di media yang dipakai maka otomatis akan menggunakan font standar, tapi ukurannya bisa berubah menyesuaikan media yang dipakai bila menggunakan ukuran font dalam em atau persen.

  11. AIRIS said:

    akhir nya nemu juga nih artikel yang bagus dan pas untuk bisa merubah warna font di widget hehe,,,
    terima kasih gan ilmu nya sangat bermanfaat bagi ane nih

  12. makasih atas share nya bos

  13. A said:

    Terima kasih atas infonya.

  14. Somiarta said:

    Sangat membantu gan dalam membuat struktur dasar html.

    bagi agan yang berminat belajar membuat website bisa dilihat di situs berikut ini Kursus Web di Bali

  15. thankss sirr , ane nyoba masukin html nya ke bagian html di post page ku , dan ternyata bisa 🙂 ,, thanksssssyou so much

  16. Aris said:

    thank you gan, sangat membantu sekali tutorialnya

  17. indar said:

    sangat bermanfaat gan….
    salam kenal

  18. iannote.com said:

    Thanks tutornya Om, its work…

  19. makasih gan, dicoba dan berhasil bagi pemula seperti saya. salam kenal

  20. hary said:

    thks om ,di coba triknya:)

Back to top