Belajar Css Font Size Property

Mengatur ukuran font-size memakai style pada CSS tidakah semudah yang anda bayangkan. Kadang memang diharapkan pemahaman lebih supaya sanggup memahami  properti pada font-size ini. Pada kenyataanya, tidak semua format yang dipakai juga sanggup sesuai pada sebagian Web Browser. Saat ini saja ada sekitar 5 unit besaran font-size yang saya kenal ialah px (pixel), em (em), % (persent), pc (pica) dan pt (point) atau ada juga pilihan standar lainnya yang sanggup anda gunakan diantaranya xx-large, x-large, larger, large, medium, small, smaller, x-small,  xx-small dan length.

Secara default web browser kebanyakan memakai 16px untuk standar font-size, tapi tidak semua font-size dengan ukuran 16px sesuai dengan keinginen web developer. Sebagai contoh, bila anda memakai ukuran % misalkan 20% berarti anda menampilkan font standar menjadi lebih kecil 20% dari ukuran standar. berbeda dengan satuan em, jikalau anda semisalkan menciptakan font-size .3em berarti ukuran font yang ditampilkan akan berukuran 3 kali lebih besar dari font standarnya.

Contoh penerapan Font-Size pada CSS:

body
{
font-size: x-large
}

p
{
font-size: 10px
}

Contoh Penerapan lainnya:

Absolute size

<p style="font-size : x-large;">
This paragraph is extra large.
</p>

Relative size

<p style="font-size : smaller;">
This paragraph is smaller than the base font size.
</p>

Length

<p style="font-size : 1.5em;">
This paragraph is 1.5 ems.
</p>

Sebenarnya klarifikasi kali ini sanggup lebih gampang dimengerti jikalau anda mengunakan tools konversi untuk mempermudah anda memahaminya. Salah satu tools yang sering saya gunakan ialah dari layanan PXtoEM. Dari namanya saja sudah terang ini merupakan layanan conversion dimana anda anda sanggup melaksanakan konversi PX to EM atau kebalikannya EM to PX.

Dengan layanan ini kita sanggup menentukan nilai font-size yang ada dalam tabel, nilai konversi yang dipakai memakai 16px sesuai standar default browser. Saat anda menentukan , dikala itu juga anda akan menemukan hasil konversi di tabel sebelahnya.

Untuk mendapat hasil yang benar2 siap dipakai dalam bentuk instruksi CSS sesuai nilai konversi pilihan anda, silahkan menuju button Get CSS..jadi lebih gampang ya :) 

Rumus yang dipakai PXtoEM juga sanggup anda pelajari:

•  PX to EM: text size in pixels / body text size in pixels = size in EMs
  o Example: 12px / 16px = .75em
• PX to %: text size in pixels / body text size in pixels * 100 = size in %
  o Example: 12px / 16px * 100 = 75%
• PX to PT: text size in pixels * points per inch / pixels per inch = size in pt
  o Example: 16px * 72 (72 points = 1 inch) / 96 (96 pixels per inch in Windows, 72 in Mac) = 12pt
•  EM to PX: text size in EMs * body text size in pixels = size in pixels
  o Example: .75em * 16px = 12px
• EM to %: text size in EMs * 100 = size in %
  o Example: .75em * 100 = 75%
• % to PX: text size in % * body text size in pixels / 100 = size in pixels
  o Example: 75 * 16px / 100 = 12px
•  % to EM: text size in % / 100 = size in EMs
  o Example: 75 / 100 = .75em
•  PT to PX: text size in pt * pixels per inch / points per inch = text size in pixels
  o Example: 12pt * 96ppi / 72ppi = 16px

Saya mengakui goresan pena kali ini jauh dari sempurna, semoga goresan pena singkat ini sanggup berkhasiat aja ya :)

Bagikan Artikel ini