课程表

CSS 高级教程

• Buku Luar CSS
• Ringkasan CSS
• Gramata Dasar CSS
• Gramata Mahir CSS
• Pemilihan Pemilaikan CSS
• Pemilihan ID CSS
• Pemilihan Klas CSS
• Pembuatan CSS
• Latar Belakang CSS
• Teks CSS
• Font CSS
• Daftar CSS

CSS 框模型

• Ringkasan Model Bounding CSS
• Margin Dalam CSS
• Batas CSS
• Margin Luar CSS
• Pertumpahan Margin Luar CSS

CSS 定位

• Ringkasan Lokasi CSS
• Lokasi Relatif CSS
• Lokasi Absolut CSS
• Layar Halaui CSS

CSS 选择器

• Pemilihan Elemen CSS
• Pemilihan Grup CSS
• Pemilihan Klas CSS Jelaskan
• Pemilihan ID CSS Jelaskan
• Pemilihan Pemilihan Sifat CSS Jelaskan
• Pemilihan Pemilaikan Anak-Anak CSS
• Pemilihan Elemen Anak CSS
• Pemilihan Saudara Kepada Kiri CSS

选修课

课程推荐：

• Panduan Kekalahan CodeW3C.com

CSS font 属性定义文本的字体系列、大小、粗细、风格（如斜体）和变形（如小型大写字母）。

Siri Font CSS

Dalam CSS, ada 2 jenis nama font-famili yang berbeda:

• Font-famili umum - kombinasi sistem font yang memiliki penampilan yang serupa (seperti "Serif" atau "Monospace")
• Font-famili khusus - font-famili khusus (seperti "Times" atau "Courier")

Selain berbagai font-famili khusus, CSS mendefinikan 5 jenis font-famili umum:

• Font Serif
• Font Sans-serif
• Font Monospace
• Font Cursive
• Font Fantasy

Jika anda ingin mendapatkan pengetahuan lebih lanjut tentang font-famili, silakan baca Siri Font CSS.

Font-famili yang ditentukan

Menggunakan Properti font-family Mendefinikan font-famili teks.

Menggunakan font-famili umum

Jika anda ingin dokumen menggunakan font sans-serif, tetapi anda tak peduli jenis font mana, berikut adalah pernyataan yang sesuai:

body {font-family: sans-serif;}

Coba sendiri

Perwakilan pengguna akan memilih font dari font-famili sans-serif (seperti Helvetica) dan menerapkannya ke elemen body. Karena warisan, pemilihan font ini akan diterapkan ke semua elemen yang terdapat di dalam elemen body, kecuali ada pemilihan yang lebih spesifik untuk menutupinya.

Font-famili yang ditentukan

Selain menggunakan font-famili umum, anda boleh menetapkan font lebih khusus melalui properti font-family.

Contoh di bawah ini menetapkan font Georgia untuk semua elemen h1:

h1 {font-family: Georgia;}

Coba sendiri

Aturan ini akan menghasilkan masalah lainnya, jika font Georgia tidak terpasang di perwakilan pengguna, hanya dapat digunakan font default perwakilan pengguna untuk menampilkan elemen h1.

Kami dapat memecahkan masalah ini dengan menggabungkan nama font khusus dan font-famili umum:

h1 {font-family: Georgia, serif;}

Coba sendiri

Jika penulis bukan memasang Georgia, tetapi memasang Times font (sebuah font dalam serupa serif), perwakilan pengguna boleh menggunakan Times untuk elemen h1. Walaupun Times bukan sepenuhnya sepadan dengan Georgia, tetapi paling sedikit mendekati.

Demi itu, kami menyarankan untuk menyediakan font-famili umum di semua aturan font-family. Dengan cara ini, disediakan jalan keluar, jika perwakilan pengguna tidak dapat menyediakan font khusus yang sepadan dengan aturan, boleh dipilih font calon.

Jika anda amat kenal dengan font, anda boleh menyediakan sekumpulan font yang serupa untuk elemen yang diberikan. Untuk melakukan hal ini, perlu mengatur font-font berdasarkan urutan keutamaan dan kemudian menghubungkannya dengan tanda koma:

p {font-family: Times, TimesNR, 'New Century Schoolbook',}
     Georgia, 'New York', serif;}

Coba sendiri

根据这个列表，用户代理会按所列的顺序查找这些字体。如果列出的所有字体都不可用，就会简单地选择一种可用的 serif 字体。

使用引号

您也许已经注意到了，上面的例子中使用了单引号。只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。

单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号：

<p style="font-family: Times, TimesNR, 'New Century Schoolbook', Georgia,
 'New York', serif;">...</p>

Coba sendiri

字体风格

font-style 属性最常用于规定斜体文本。

该属性有三个值：

• normal - 文本正常显示
• italic - 文本斜体显示
• oblique - 文本倾斜显示

Contoh

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

Coba sendiri

italic 和 oblique 的区别

font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

字体变形

font-variant 属性可以设定小型大写字母。

小型大写字母不是一般的大写字母，也不是小写字母，这种字母采用不同大小的大写字母。

Contoh

p {font-variant:small-caps;}

Coba sendiri

Tebal huruf

Atribut font-weightTetapkan ketebalan teks.

Guna kata kunci bold untuk menetapkan teks menjadi tebal.

Kata kunci 100 ~ 900 menentukan 9 tingkat tebal huruf. Jika suatu huruf mengandungi tingkat tebal ini, nombor ini akan langsung pindahkan kepada tingkat yang ditetapkan, 100 sepadan paling halus, 900 sepadan paling tebal. Nombor 400 sepadan normal, sementara 700 sepadan bold.

Jika elemen teks disesuaikan untuk tebal, pelayar akan menetapkan tebal huruf yang lebih tebal daripada nilai warisan. Sebaliknya, kata kunci lighter akan mengurangkan tingkat tebal huruf daripada naikkan.

Contoh

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

Coba sendiri

Saiz huruf

Atribut font-sizeTetapkan saiz teks.

Kemampuan untuk mengelola saiz teks penting di bidang desain web. Tetapi, anda tak patut mengubah saiz teks supaya paragraf kelihatan seperti tajuk, atau supaya tajuk kelihatan seperti paragraf.

Semua masa gunakan tajuk HTML yang betul, seperti gunakan <h1> - <h6> untuk menandakan tajuk, gunakan <p> untuk menandakan paragraf.

Nilai font-size boleh adalah nilai absolut atau relatif.

Nilai absolut:

• Tetapkan teks kepada saiz yang ditentukan.
• Tidak diizinkan pengguna untuk mengubah saiz teks di semua pelayar (tidak baik bagi kegunaan).
• Saiz absolut digunakan untuk menentukan saiz fizikal output.

Saiz relatif:

• Tetapkan saiz berbanding dengan elemen sekeliling.
• Izinkan pengguna untuk mengubah saiz teks di pelayar.

Perhatian:Jika anda tak menetapkan saiz huruf, saiz teks biasa (contohnya paragraf) adalah 16 piksel (16px=1em).

Gunakan piksel untuk menetapkan saiz huruf.

Dengan pengaturan saiz teks dalam piksel, anda dapat mengawal sepenuhnya saiz teks:

Contoh

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

Coba sendiri

Di Firefox, Chrome, dan Safari, saiz teks yang diambil contoh boleh diubah semula, tetapi di Internet Explorer tak boleh.

Walaupun saiz teks boleh diubah menggunakan alat skala pelayar, ini sebenarnya adalah penyesuaian halaman keseluruhan, bukan hanya teks.

Gunakan em untuk menetapkan saiz huruf.

Jika hendak mengelakkan masalah saiz teks yang tak dapat diubah di Internet Explorer, banyak pengembang menggunakan unit em untuk menggantikan pixels.

W3C menyarankan untuk menggunakan satuan ukuran em.

1em sama dengan ukuran font saat ini. Jika ukuran font elemen adalah 16 piksel, maka untuk elemen itu, 1em sama dengan 16 piksel. Dalam mengatur ukuran huruf, nilai em akan berubah terhadap ukuran font parent element.

Ukuran teks default dalam pelayar adalah 16 piksel. Jadi, ukuran default 1em adalah 16 piksel.

Dapat digunakan rumus berikut untuk mengkonversi piksel ke em:pixels/16=em

（Catatan: 16 sama dengan ukuran font default parent element, asumsikan ukuran font parent element adalah 20px, maka rumus perlu diubah:pixels/20=em）

Contoh

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

Coba sendiri

Dalam contoh di atas, ukuran teks dalam satuan em sama dengan ukuran teks di contoh sebelumnya yang diukur dalam piksel. Namun, jika menggunakan satuan em, dapat mengatur ukuran teks di semua pelayar.

Sayangnya, masih ada masalah di IE. Saat mengatur ukuran teks, akan lebih besar atau lebih kecil daripada ukuran normal.

Kombinasi persen dan EM

Rancangan yang efektif dalam semua pelayar adalah untuk mengatur nilai font-size default dalam bentuk persen untuk elemen body (parent element):

Contoh

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

Coba sendiri

Kode kami sangat efektif. Dalam semua pelayar, dapat menampilkan ukuran teks yang sama dan memungkinkan pelayar untuk menggandakan ukuran teks.

Properti Huruf CSS

Kotak Alat

Panduan Referensi CSS

Contoh CSS

Ujian CSS

Panduan CSS

Pautan Pemendoring