Pada tutorial sebelumnya, kita sudah mempelajari Tutorial Belajar CSS Bagian 5 : Cara Menggunakan Properti Background di CSS, selanjutnya kita akan mempelajari cara menggunakan properti font di CSS. Show
Pada tutorial ini, kita akan belajar mengatur font konten yang ada di dalam elemen HTML. Berikut prperti yang digunakan untuk mengatur fnt dalam elemen HTML :
Mengatur font-familyBerikut ini adalah contoh yang menunjukkan bagaimana mengatur font-family dari sebuah elemen. Biasanya diberi nilai berupa nama keluarga font apa saja. <html>
<head>
</head>
<body>
<p style = "font-family:georgia,garamond,serif;">
Kalimat ini akan ditampilkan dengan jenis huruf georgia, garamond, atau
font default serif tergantung jenis font apa yang tersedia di komputer Anda.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut : CodePen Embed FallbackCodePen Embed Fallback Mengatur font-styleBerikut adalah contoh bagaimana mengatur gaya font dari sebuah elemen. Nilai yang biasanya digunakan adalah normal, italic dan oblique. <html>
<head>
</head>
<body>
<p style = "font-style:italic;">
Kalimat ini akan ditampilkan dalam gaya miring/italic
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut : CodePen Embed FallbackCodePen Embed Fallback Mengatur font-variantContoh berikut menunjukkan cara mengatur font-varian suatu elemen. Nilai yang biasanya digunakan adalah normal dan small-caps. <html>
<head>
</head>
<body>
<p style = "font-variant:small-caps;">
Kalimat ini akan ditampilkan dalam huruf besar dan ukuran kecil
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut : CodePen Embed FallbackCodePen Embed Fallback Mengatur font-weightContoh berikut menunjukkan cara mengatur bobot font suatu elemen. Properti ‘font-weight’ menyediakan fungsionalitas untuk menentukan seberapa tebal font tersebut. Nilai yang biasanya digunakan adalah normal, bold, bolder, lighter, 100, 200, 300, 400, 500, 600, 700, 800, 900. <html>
<head>
</head>
<body>
<p style = "font-weight:bold;">
Tulisan ini ditebalkan menggunakan nilai ‘bold’.
</p>
<p style = "font-weight:bolder;">
Tulisan ini ditebalkan menggunakan nilai ‘bolder’.
</p>
<p style = "font-weight:500;">
Tulisan ini memiliki besar 500.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut : CodePen Embed FallbackCodePen Embed Fallback Mengatur font-sizeContoh berikut menunjukkan cara mengatur ukuran font suatu elemen. Properti ‘font-size’ digunakan untuk mengontrol ukuran font. Nilai yang biasanya digunakan adalah xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger, ukuran dalam piksel atau dalam %. <html>
<head>
</head>
<body>
<p style = "font-size:20px;">
Ukuran font ini adalah 20 pixels
</p>
<p style = "font-size:small;">
Ukuran font ini adalah small
</p>
<p style = "font-size:large;">
Ukuran font ini adalah large
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut : CodePen Embed FallbackCodePen Embed Fallback Mengatur font-size-adjustContoh berikut menunjukkan cara mengatur penyesuaian ukuran font suatu elemen. Properti ini memungkinkan Anda menyesuaikan tinggi-x untuk membuat font lebih terbaca. Nilai yang biasanya digunakan memungkinkan bisa berupa angka apapun. <html>
<head>
</head>
<body>
<p style = "font-size-adjust:0.61;">
Kalimat ini menggunakan properti font-size-adjust value.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut : CodePen Embed FallbackCodePen Embed Fallback Mengatur font-strecthContoh berikut menunjukkan cara menyetel bentangan font suatu elemen. Properti ini bergantung pada komputer pengguna untuk memiliki versi font yang diperluas atau ringkas yang digunakan. Nilai yang biasanya digunakan adalah normal, wider, narrower, ultra-condensed, condensed, semi-condensed, semi-expanded, expanded, extra-expanded, ultra-expanded. <html>
<head>
</head>
<body>
<p style = "font-stretch:ultra-expanded;">
Jika perubahan tidak tampak di komputer Anda, artinya komputer Anda tidak menyediakan
<br>versi font condensed atau expanded yang dapat digunakan.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut : CodePen Embed FallbackCodePen Embed Fallback Shorthand PropertyUntuk mempermudah, Anda dapat menggunakan properti ‘font’ untuk merangkum dan mengatur semua properti font sekaligus. Sebagai contoh : <html>
<head>
</head>
<body>
<p style = "font:italic small-caps bold 15px georgia;">
Menerapkan semua property dalam kalimat.
</p>
</body>
</html>
Browser akan menampilkan hasil sebagai berikut : CodePen Embed FallbackCodePen Embed Fallback Semoga tutorial ini membantu Anda untuk memahami bagaimana cara menggunakan properti font di CSS untuk membuat tampilan huruf menjadi lebih bagus. Properti CSS yang mana yang dapat digunakan untuk mengontrol ukuran teks?Untuk mengatur ukuran font, kita bisa menggunakan properti font-size . Properti ini dapat kita beri nilai dengan satuan px (piksel), % (persentase), em , rem , dan lain-lain. Artinya: Kita akan mengatur ukuran font untuk semua elemen <p> sebesar 18px .
Apakah CSS property untuk mengatur ukuran huruf karakter?Property CSS yang akan kita gunakan adalah font-size.
Apa fungsi font weight?Font Weight
font-weight adalah properti CSS yang dapat mengubah ketebalan sebuah teks.
Bagaimana cara mengubah ukuran teks menggunakan HTML?Cara kedua untuk mengubah ukuran teks dalam dokumen HTML adalah dengan menggunakan atribut ukuran pada tag <FONT> dalam bentuk size="n"> <font (dimana n adalah nomor 1 sampai 7). Bila Anda menggunakan atribut ukuran, semakin besar nilai, semakin besar ukuran teks dari dan mengurangi ukuran huruf.
|
Manakah fungsi css mana yang mengontrol ukuran teks?
Pos Terkait
Copyright © 2024 ketajaman Inc.
