Mengatur Jenis Font di Dokumen HTML dengan CSS


Halo sobat Artikel Multimedia, apa kabar sobat semoga sehat selalu. Di postingan sebelumnya kita sudah membahas cara mengatur warna font, di postingan kali ini kita akan membahas bagaimana mengatur jenis font dalam dokumen html. Properti css yang digunakan untuk mengatur jenis font adalah properti font-family. Untuk membuat bentuk font yang berbeda, terdapat 5 jenis font umum yang bisa sobat gunakan, yaitu: 

1. Font Serif, contoh nama font-nya seperti Times New Roman, Georgia, dan Garamond.
2. Font Sans-Serif, contoh nama font-nya seperti Arial, Verdana, dan Helvetica.
3. Font Monospace, contoh nama font-nya seperti Courier New, Lucida Console, dan Monaco.
4. Font Cursive, contoh nama font-nya seperti Brush Script MT dan Lucida Handwriting.
5. Font Fantasy, contoh nama font-nya seperti Copperplate dan Papyrus.

Berikut cara mengatur font di dalam dokumen html:

1. Menggunakan cara inline

<p style="font-family: serif">Tulisan ini menggunakan font serif</p>


2. Menggunakan cara internal

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mengatur Jenis Font</title>
</head>
<style>
    p {
        font-family: monospace
    }
</style>
 
<body>
    <p>Tulisan ini menggunakan font monospace</p>
</body>
 
</html>

 


3. Menggunakan cara eksternal

Jika sobat menggunakan cara yang ketiga ini, maka sobat harus membuat file html dan css secara terpisah. 


- kode di file html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mengatur Jenis Font</title>
</head>
 
<link rel="stylesheet" href="css/style.css">
 
<body>
    <p>Tulisan ini menggunakan font cursive</p>
</body>
 
</html>

 

- kode di file css

p {
 font-family: cursive;
}

Sekian pembahasan tentang cara mengatur jenis font, jika sobat tertarik dengan artikel seputar multimedia silakan kunjungi postingan kami lainnya di blog ini. Terima kasih … 

Posting Komentar

0 Komentar