Định nghĩa và sử dụng
Thuộc tính font thiết lập font cho thành phần, bao gồm font chữ, độ rộng, …
Cấu trúc
tag {
font: giá trị;
}
Với giá trị như sau:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| font-family | giá trị font | font-family: Arial, Helvetica, sans-serif; | Xác định giá trị font family cho chữ. |
| font-size | Kích cỡ | font-size: 120%; | Xác định kích cỡ của chữ, đơn vị có thể là px, em, %, … |
| font-size-adjust | Chỉ Firefox hỗ trợ thuộc tính này, nên ít được dùng tới. | ||
| font-stretch | Hiện tại các trình duyệt không hỗ trợ thuộc tính này. | ||
| font-style | normal italic oblique |
font-style: italic; | Xác định loại chữ. |
| font-variant | normal small-caps inherit |
font-variant: small-caps; | Chuyển đổi kiểu chữ (thường thành hoa). |
| font-weight | bold normal Giá trị |
font-weight: bold; | Hiển thị chữ đậm hay thường. |
Ví dụ
Ví dụ về thuộc tính font
font-family
Xác định giá trị font family cho chữ
<html>
<head>
<style type="text/css">
p.fontArial {
font-family: Arial, Helvetica, sans-serif;
}
p.fontCourier {
font-family: "Courier New", Courier, monospace;
}
</style>
</head>
<body>
<p class="fontArial">font Arial</p>
<p class="fontCourier">font Courier</p>
</body>
</html>
font Arial
font Courier
font-size
Xác định kích cỡ cho chữ
<html>
<head>
<style type="text/css">
p.size200 {
font-size: 200%;
}
</style>
</head>
<body>
<p>font-size</p>
<p class="size200">font size 200%</p>
</body>
</html>
font-size
font size 200%
font-size
font size 200%
<html>
<head>
<style type="text/css">
p.fontNormal {
font-style: normal;
}
p.fontItalic {
font-style: italic;
}
p.fontOblique {
font-style: oblique;
}
</style>
</head>
<body>
<p class="fontItalic">font style normal</p>
<p class="fontItalic">font style italic</p>
<p class="fontOblique">font style oblique</p>
</body>
</html>
font style normal
font style italic
font style oblique
font-variant
Chuyển đổi kiểu chữ (thường thành hoa)
<html>
<head>
<style type="text/css">
p.fontVariant {
font-variant: small-caps;
}
</style>
</head>
<body>
<p>font variant normal</p>
<p class="fontVariant">Font Variant Small Caps</p>
</body>
</html>
font variant normal
Font Variant Small Caps
font-weight
Chuyển đổi kiểu chữ (thường thành chữ in đậm)
<html>
<head>
<style type="text/css">
p.fontWeightNormal {
font-weight: normal;
}
p.fontWeight600 {
font-weight: 600;
}
p.fontWeightBold {
font-weight: bold;
}
</style>
</head>
<body>
<p class="fontWeightNormal">font weight normal</p>
<p class="fontWeight600">font weight 600</p>
<p class="fontWeightBold">font weight bold</p>
</body>
</html>