Cara Mengubah Ukuran Font Teks HTML dengan CSS font-size

font-size

tutorial belajar format text dengan css kali ini kita akan belajar mengatur ukuran font dengan css, properti css untuk mengatur ukuran font adalah font-size.

Property font-size

properti font-size adalah properti untuk mengubah ukuran font, dengan properti font-size kita bisa memperbesar ukuran font atau bisa juga untuk memperkecil

Sintak font-size

untuk mengunakan properti font-size kita bisa menulis properti font-size kedalam style css dengan cara sebagai berikut:

h1 {
    font-size: 40px;
}
h2 {
    font-size: 30px;
}
p {
    font-size: 14px;
}

dengan sintak diatas artinya saya akan mengubah ukuran font dari tag h1, h2, dan tag p.

properti font-size bisa diterapkan dengan nilai apa saja, dan memiliki banyak “satuan ukuran” seperti pixelkeyword seperti small, medium, large, ukuran satuan persenem, dan juga ukuran lain seperti cm, mm, pt, dan pica.

untuk lebih memahami dalam penerapan satuan nilai baik itu pixel, dan satuan lainnya maka lebih baik kita lihat contoh mengubah ukuran font dengan css dibawah ini:

Contoh Font Size ukuran Pixel

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
font-size: 40px;
}

h2 {
font-size: 30px;
}

p {
font-size: 14px;
}
</style>
</head>
<body>

<h1>heading 1</h1>
<h2>heading 2</h2>
<p>paragrap.</p>
<p>paragrap Lainnya.</p>

</body>
</html>

dalam contoh diatas font h1 berukuran 40px, font h2 berukuran 30px, sedangkan paragraf berukuran 14px. untuk melihat hasil lainnya silakan diedit code diatas ganti semua ukuran lalu jalankan dan lihat hasilnya.

Contoh font size ukuran persen

<!DOCTYPE html>
<html>
<head>
<title>Belajar font-size</title>
<style type="text/css">
.satu {
font-size: 100%;
}
.dua {
font-size: 16px;
}
.tiga {
font-size: 80%;
}
span {
font-size: 80%;
color: blue;
}
</style>
</head>
<body>
<h2>Belajar CSS font-size "(%)"</h2>

<h3>font-size 100%:</h3>
<div>
<p class="satu">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,
fermentum rhoncus leo. Curabitur eu mi vitae
metus posuere laoreet.
</div>

<h3>font-size 16px:</h3>
<p class="dua">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Nulla erat dolor, ullamcorper in ultricies eget,
fermentum rhoncus leo. Curabitur eu mi vitae
metus posuere laoreet.</p>

<h3>font-size tag p = 80%, tag span = 80%:</h3>
<p class="tiga">
<span>Lorem ipsum dolor sit amet,
consectetur adipiscing elit.</span>
Nulla erat dolor, ullamcorper in ultricies eget,
fermentum rhoncus leo. <i>Curabitur</i> eu mi vitae metus
posuere laoreet.
</p>
</body>
</html>

Contoh font size ukuran EM

<!DOCTYPE html>
<html>
<head>
<style>
body {
 font-size: 100%;
}

h1 {
 font-size: 2.5em;
}

h2 {
 font-size: 1.875em;
}

p {
 font-size: 0.875em;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>

</body>
</html>

Contoh Font Size Ukuran Persen dan EM

<!DOCTYPE html>
<html>
<head>
<style>
body {
font-size: 100%;
}

h1 {
font-size: 2.5em;
}

h2 {
font-size: 1.875em;
}

p {
font-size: 0.875em;
}
</style>
</head>
<body>

<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<p>This is a paragraph.</p>
<p>Specifying the font-size in percent and em displays the same size in all major browsers, and allows all browsers to resize the text!</p>

</body>
</html>

Penggunaan satuan nilai lainnya caranya sama seperti yang diatas, hanya mengubah satuannya seperti cm, dll.

Keyword:

  • mengubah font size

Get real time updates directly on you device, subscribe now.

loading...

Ingin Berkomentar?

×
Lewat ke baris perkakas