HTML - Font

Font memainkan peran yang sangat penting dalam membuat situs web lebih ramah pengguna dan meningkatkan keterbacaan konten. Bentuk dan warna font sepenuhnya bergantung pada komputer dan browser yang digunakan untuk melihat halaman Anda, tetapi Anda dapat menggunakan HTMLtag untuk menambahkan gaya, ukuran, dan warna pada teks di situs web Anda. Anda dapat menggunakan file<basefont> tag untuk menyetel semua teks Anda ke ukuran, wajah, dan warna yang sama.

Tag font memiliki tiga atribut yang disebut size, color, dan faceuntuk menyesuaikan font Anda. Untuk mengubah salah satu atribut font kapan saja dalam halaman web Anda, cukup gunakan tag . Teks selanjutnya akan tetap berubah sampai Anda menutup dengan tag . Anda dapat mengubah satu atau semua atribut font dalam satu tag .

Note-The huruf dan basefont tag usang dan itu seharusnya dihapus dalam versi masa depan dari HTML. Jadi sebaiknya tidak digunakan, disarankan untuk menggunakan gaya CSS untuk memanipulasi font Anda. Namun tetap untuk tujuan pembelajaran, bab ini akan menjelaskan tag font dan basefont secara detail.

Atur Ukuran Font

Anda dapat mengatur ukuran font konten menggunakan sizeatribut. Kisaran nilai yang diterima adalah dari 1 (terkecil) hingga 7 (terbesar). Ukuran default font adalah 3.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Size</title>
   </head>

   <body>
      <font size = "1">Font size = "1"</font><br />
      <font size = "2">Font size = "2"</font><br />
      <font size = "3">Font size = "3"</font><br />
      <font size = "4">Font size = "4"</font><br />
      <font size = "5">Font size = "5"</font><br />
      <font size = "6">Font size = "6"</font><br />
      <font size = "7">Font size = "7"</font>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Ukuran Font Relatif

Anda dapat menentukan berapa banyak ukuran yang lebih besar atau berapa banyak ukuran yang lebih kecil dari ukuran font yang telah ditetapkan sebelumnya. Anda dapat menentukannya seperti atau 

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Relative Font Size</title>
   </head>

   <body>
      <font size = "-1">Font size = "-1"</font><br />
      <font size = "+1">Font size = "+1"</font><br />
      <font size = "+2">Font size = "+2"</font><br />
      <font size = "+3">Font size = "+3"</font><br />
      <font size = "+4">Font size = "+4"</font>
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Mengatur Font Face

Anda dapat menyetel tampilan font menggunakan atribut wajah tetapi perlu diketahui bahwa jika pengguna yang melihat halaman tidak menginstal font, mereka tidak akan dapat melihatnya. Sebaliknya pengguna akan melihat tampilan font default yang berlaku untuk komputer pengguna.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Font Face</title>
   </head>

   <body>
      <font face = "Times New Roman" size = "5">Times New Roman</font><br />
      <font face = "Verdana" size = "5">Verdana</font><br />
      <font face = "Comic sans MS" size =" 5">Comic Sans MS</font><br />
      <font face = "WildWest" size = "5">WildWest</font><br />
      <font face = "Bedrock" size = "5">Bedrock</font><br />
   </body>

</html>

Ini akan menghasilkan hasil sebagai berikut -

Tentukan tampilan font alternatif

Seorang pengunjung hanya akan dapat melihat font Anda jika mereka menginstal font itu di komputer mereka. Jadi, dimungkinkan untuk menentukan dua atau lebih alternatif jenis huruf dengan membuat daftar nama jenis huruf, dipisahkan oleh koma.

<font face = "arial,helvetica">
<font face = "Lucida Calligraphy,Comic Sans MS,Lucida Console">

Saat halaman Anda dimuat, browser mereka akan menampilkan font pertama yang tersedia. Jika tidak ada font yang diinstal, maka itu akan menampilkan font default Times New Roman .

Note - Periksa daftar lengkap HTML Standard Fonts.

Mengatur Warna Font

Anda dapat mengatur warna font apa pun yang Anda suka menggunakan atribut color . Anda dapat menentukan warna yang Anda inginkan dengan nama warna atau kode heksadesimal untuk warna tersebut.

Note - Anda dapat memeriksa daftar lengkap HTML Color Name with Codes.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Font Color</title>
   </head>
	
   <body>
      <font color = "#FF00FF">This text is in pink</font><br />
      <font color = "red">This text is red</font>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -

Elemen <basefont>

Elemen <basefont> seharusnya mengatur ukuran font default, warna, dan jenis huruf untuk setiap bagian dari dokumen yang tidak ada dalam tag . Anda dapat menggunakan elemen untuk mengganti pengaturan <basefont>.

Tag <basefont> juga mengambil atribut color, size dan face dan ini akan mendukung pengaturan font relatif dengan memberi ukuran nilai +1 untuk ukuran yang lebih besar atau −2 untuk dua ukuran yang lebih kecil.

Contoh

<!DOCTYPE html>
<html>

   <head>
      <title>Setting Basefont Color</title>
   </head>
	
   <body>
      <basefont face = "arial, verdana, sans-serif" size = "2" color = "#ff0000">
      <p>This is the page's default font.</p>
      <h2>Example of the &lt;basefont&gt; Element</h2>
      
      <p><font size = "+2" color = "darkgray">
            This is darkgray text with two sizes larger
         </font>
      </p>

      <p><font face = "courier" size = "-1" color = "#000000">
            It is a courier font, a size smaller and black in color.
         </font>
      </p>
   </body>
	
</html>

Ini akan menghasilkan hasil sebagai berikut -