Cara Merubah Warna Teks dan Jenis Font di HTML

Cara Merubah Warna Teks dan Jenis Font di HTML - Memilih warna teks dan jenis font yang diterapkan pada dokumen HTML yang kita buat merupakan salah satu hal penting yang harus diperhatikan. Dimana font adalah jenis huruf yang digunakan dalam suatu dokumen.

Ada beberapa hal yang harus kita perhatikan seperti apakah jenis font yang diterapkan sudah sesuai dengan desain website, apakah jenis font yang diterapkan memudahkan pengunjung untuk membaca konten di website, apakah jenis font sesuai tema atau topik website atau isinya dan apakah warna teks yang diterapkan sudah sesuai dengan background dan tidak menyulitkan pengunjung untuk membaca teks dan lain sebagainya.

HTML sendiri sudah menyediakan berbagai elemen yang bersifat spesifik dalam mengatur penerapan font dengan warna pada dokumen HTML. Ada banyak sekali jenis font yang bisa kita gunakan, namun kita juga harus ingat bahwa font yang akan ditampilkan pada web browser secara keseluruhan berasal dari komputer pengguna. Tidak masalah jika browser yang digunakan berasal dari komputer kita, tetapi jika dibuka di browser di komputer lain, bisa jadi desain web yang telah dirancang itu kacau karena jenis font yang diterapkan tidak tersedia di sana.

Untuk alasan ini, font standar digunakan yang umumnya tersedia di Windows, Linux, Mac OS dan lainnya. Font standar umumnya didukung oleh sebagian besar browser web jadi Anda tidak perlu khawatir. Jenis font standar berikut yang dapat Anda gunakan :

1. Font Serif

Font serif adalah font yang memiliki foot di setiap huruf seperti Times New Roman dan Georgia. Jenis font ini cenderung cepat dan mudah dibaca, sehingga umumnya digunakan untuk media cetak kertas.

2. Jenis Font Monospace

Font monospace merupakan font yang memiliki lebar yang sama untuk tiap karakternya, seperti Courier, Courier New, dan Andale Mono. Karena sifatnya inilah, font ini umumnya digunakan untuk menulis program.

3. Jenis Font Sans-Serif

Font sans serif adalah fonta yang tidak memiliki kaki pada setiap huruf, seperti Arial, Verdana, Trebuchet MS, Helvetica, dan Calibri. Font ini sering digunakan sebagai jenis font di website.

4. Jenis Font Cursive

Font Cursive adalah jenis font yang meniru kaligrafi atau tulisan tangan seperti Comic Sans. Font ini biasanya digunakan untuk aspek penulisan yang kurang formal.

5. Jenis Font Fantasy

Font Fantasy adalah font visual dengan karakter font khusus seperti matrix, disney dan lainnya dan jarang digunakan untuk teks halaman.

Berikut ini adalah penjelasan agar anda dapat memahami warna teks materi dan jenis font pada HTML, simak ulasannya dibawah ini:

Element Font

Dengan tag font, Anda dapat menyesuaikan atau mengubah warna dan ukuran teks. Anda juga dapat menggunakan elemen font yang disediakan oleh HTML.

Penggunaan elemen ini ditandai dengan tag dan diakhiri dengan tag . Mengubah warna dan ukuran teks dilakukan dengan menggunakan atribut-atribut yang ada pada elemen font, yaitu:

1. Face berfungsi Menentukan jenis font yang digunakan di halaman web

2. Color berfungsi Menunjukkan warna teks yang digunakan

3. Size berfungsi Merepresentasikan ukuran teks dengan nilai 1 hingga 7

Berikut ini adalah contoh kode yang menggunakan tag font di HTML :

Sekarang coba jalankan kode diatas pada browser, hasilnya akan terlihat seperti dibawah ini.

Cara Merubah Warna Teks dan Jenis Font di HTML

Dalam penggunaan saat ini, tag hanya didukung oleh HTML 4.01 dan tidak didukung oleh HTML5. Hal ini dikarenakan penggunaan tag dapat diganti dengan CSS dimana fungsi CSS lebih unggul dan efisien dibandingkan dengan tag .

Berikut contoh penggunaan CSS dalam pengaturan font di HTML :

Hasilnya

Setelah Anda melihat kode CSS dan tampilan gambar di browser, tentunya Anda memiliki banyak pertanyaan seperti apa fungsi properti font pada kode di atas. Disini saya akan memberikan sedikit penjelasan satu persatu (tapi ingat, kita tetap fokus pada HTML dulu, bukan CSS) :

1. CSS font size

Ukuran font digunakan untuk menentukan ukuran karakter teks yang akan ditampilkan. Jadi, Anda dapat menerapkan ukuran font yang berbeda untuk setiap teks di dokumen HTML. Anda dapat menggunakan pixel, em atau% units untuk menentukan ukuran font seperti contoh pada kode sebelumnya yaitu :

Sangat disarankan untuk menggunakan unit em daripada piksel di mana 1em sama dengan 16 piksel. Tetapi jika Anda lebih nyaman dengan piksel, itu bagus. Dalam contoh #p1 {font-size: 1em; }, nilai piksel adalah 16 piksel karena 16 piksel / 16 = 1em.

2. CSS font family

Font family digunakan untuk menentukan jenis font yang diterapkan pada dokumen HTML. Sebagai contoh perhatikan penggunaan font-family pada kode sebelumnya, yaitu :

Pada #p terdapat tiga jenis font yaitu Rockwell, Calibri dan Monospace. Artinya jenis font pertama yang akan diterapkan adalah Rockwell. Namun, jika jenis font Rockwell tidak tersedia di komputer pengguna, jenis font yang akan diterapkan adalah Calibri. Kemudian, jika tidak tersedia, maka terapkan Monospace yang merupakan font standar.

3. CSS font weight

Font weight digunakan untuk mencetak huruf tebal, berikut contohnya pada kode
sebelumnya :

4. CSS font style

Font style digunakan untuk membuat teks miring dimana Anda dapat menggunakan 3 nilai yaitu normal, italic dan oblique. Berikut contoh penggunaan gaya font :

5. CSS font variant

Font variant digunakan untuk mencetak teks dengan huruf kapital semua. Berikut contoh penggunaannya :

Setelah membaca artikel di atas, saya berharap Anda dapat mengubah warna dan jenis font pada dokumen HTML Anda. Terimakasih