Property Font CSS miring tebal family font times

font ini adalah satu dari beberapa property css, fungsi property font ini adalah untuk memberi tampilan berbeda pada text. beberapa property pada font antara lain font-size, font-family, font-style, font-variant.

ok, mari kita bahas satu persatu, property dan value dari font ini akan kita terapkan ke inline style, berikut rincianya!

font-size

fungsi font-size ini adalah untuk memberi ukuran pada text, sedangkan value dari font-size antara lain

• normal
• xx-small
• x-small
• smal
• smaler
• medium
• large
• x-large
• xx-large
• larger
• percent(%)
• panjang(px, pt)

contoh penulisan dan tampilan font-size

<span style="font-size:30px">ukuran font 30px</span>

jadinya seperti ini
ukuran font 30px

<span style="font-size:20pt">ukuran font 20pt</span>

jadinya seperti ini
ukuran font 20pt

<span style="font-size:normal">ukuran font normal</span>

jadinya seperti ini
ukuran font normal

<span style="font-size:xx-small">ukuran font xx-small</span>

jadinya seperti ini
ukuran font xx-small

<span style="font-size:x-small">ukuran font x-small</span>

jadinya seperti ini
ukuran font x-small

<span style=”font-size:small”>ukuran font small</span>
jadinya seperti ini
ukuran font small

<span style="font-size:smaller">ukuran font smaller</span>

jadinya seperti ini
ukuran font smaller

<span style="font-size:xx-large">ukuran font xx-large</span>

jadinya seperti ini
ukuran font xx-large

<span style="font-size:x-large">ukuran font x-large</span>

jadinya seperti ini
ukuran font x-large

<span style="font-size:large">ukuran font large</span>

jadinya seperti ini
ukuran font large

<span style="font-size:larger">ukuran font larger</span>

jadinya seperti ini
ukuran font larger

<span style="font-size:medium">ukuran font medium</span>

jadinya seperti ini
ukuran font medium

<span style="font-size:200%">ukuran font 200%</span>

jadinya seperti ini
ukuran font 200%

font-style

font-style ini hanya mememiliki tiga value(css2) antara lain

• normal
• italic
• oblique

contoh penulisan dan tampilan font-style

<span style="font-style:normal">font style normal</span>

jadinya seperti ini
font style normal

<span style="font-style:italic">font style italic</span>

jadinya seperti ini
font style italic

<span style="font-style:oblique">font style oblique</span>

jadinya seperti ini
font style oblique

font-weight

fungsi dari property font-weight adalah untuk mengatur ketabalan font, value dari font-weight antara lain

• normal
• bold
• bolder
• lighter
• 100-900

contoh penulisan dan tampilan font-weight

<span style="font-weight:normal">font weight normal</span>

jadinya seperti ini
font weight normal

<span style="font-weight:bold">font weight bold</span>

jadinya seperti ini
font weight bold

<span style="font-weight:bolder">font weight bolder</span>

jadinya seperti ini
font weight bolder

<span style="font-weight:lighter">font weight lighter</span>

jadinya seperti ini
font weight lighter

<span style="font-weight:800">font weight 800</span>

jadinya seperti ini
font weight 800

<span style="font-weight:600">font weight 600</span>

jadinya seperti ini
font weight 600

<span style="font-weight:400">font weight 400</span>

jadinya seperti ini
font weight 400

<span style="font-weight:200">font weight 200</span>

jadinya seperti ini
font weight 200

font-variant

font-variant hanya memiliki dua value/nilai antara lain

• normal
• small-caps

contoh tampilan dan penulisan font-variant

<span style="font-variant:normal">font variant normal</span>

jadinya seperti ini
font variant normal

<span style="font-variant:small-caps">font variant semua huruf capiltal</span>

jadinya seperti ini
font variant semua huruf capiltal

font-family

font-family ini adalah property untuk memberi nilai generic font seperti times, verdana, arial, dll untuk value lainya bisa dihat dengan cara klik tool(browser firefox) lalu options(tab view) pilih content kemudian lihat default font

contoh tampilan dan penulisan font-family

<span style="arial">font family, tampilanya yah sperti ini</span>

jadinya seperti ini
font family, tampilanya yah sperti ini

<span style="font-family:serif">font family, tampilanya yah sperti ini</span>

jadinya seperti ini
font family, tampilanya yah sperti ini

<span style="font-family:Times">font family, tampilanya yah sperti ini</span>

jadinya seperti ini
font family, tampilanya yah sperti ini

<span style="font-family:"arial black">font family, tampilanya yah sperti ini</span>

jadinya seperti ini
font family, tampilanya yah sperti ini

<span style="font-family:giorgia">font family, tampilanya yah sperti ini</span>

jadinya seperti ini
font family, tampilanya yah sperti ini

<span style="font-family:verdana">font family, tampilanya yah sperti ini</span>

jadinya seperti ini
font family, tampilanya yah sperti ini

<span style="font-family:kartika">font family, tampilanya yah sperti ini</span>

jadinya seperti ini
font family, tampilanya yah sperti ini

sobat juga bisa memasukkan beberapa font property sekaligus

pada contoh diatas kita hanya memasukkan satu style property kedalam tag span, sobat bisa menambahkan beberapa property sakaligus misal seperti ini

<span style="font-size:50px;font-variant:normal;font-weight:normal;font-family:kartika">tampilanya sperti ini</span>

jadinya sperti ini
tampilanya sperti ini

<span style="font-size:40px;font-variant:italic;font-weight:bolder;font-family:times">tampilanya sperti ini</span>

jadinya sperti ini
tampilanya sperti ini

<span style="font-size:30px;font-variant:normal;font-weight:normal;font-family:arial">tampilanya sperti ini</span>

jadinya sperti ini
tampilanya sperti ini

<span style="font-size:20px;font-variant:italic;font-weight:bold;">tampilanya sperti ini</span>

jadinya sperti ini
tampilanya sperti ini

shouthand font

untuk mempersingkat penulisan, font css ini dilengkapi dengan shouthand. shouthand adalah mode penulisan css yang di singkat, kita kan bisa jenuh kalau kodenya ditulis panjang-panjang. nah, itulah enaknya css selain asik, css ini juga memudahkan

contoh shouthand font css seperti ini

<span style="font:normal normal 30px arial;">seperti inilah penulisan shouthand css</span>

jika ditulis normal seperti ini

<span style="font-style:normal; font-variant:normal; font-size:30px; font-family:arial;">jika ditulis normal seperti ini</span>

jelaskan bedanya, yang satu agak panjang dan yang satunya agak pendek!

aturan penulisan shouthand font css seperti ini

font:(spasi)value-font-style(spasi)value-font-variant(spasi)value-font-weight(spasi)value-font-size(spasi)value-font-family;

bagaimana penulisan css font dalam bentuk internal style?

semua contoh diatas kita tulis dalam bentuk inline style atau style cssnya dimasukkan kedalam tag html! contoh penulisan internal css font sperti ini

body{
font: normal normal 18px times;/*yah seperti ini */
}

body h1{
font: normal normal 40px arial;/*yah seperti ini */
}

jika ada kekurangan mohon maaf, tinggalkan komentar jika ada yang pelu diperbaiki.

oia, value dari css font terletak antara : dan ;

contoh

• :bold;
• :italic;
• :normal;
• :times;

sedangkan fungsi dari value atau nilai ini adalah untuk merubah tampilan

semoga bemanfaat