Thuộc tính phông chữ CSS
Ví dụ
Đặt một số thuộc tính phông chữ với khai báo tốc ký:
p.a
{
font: 15px Arial, sans-serif;
}
p.b
{
font: italic small-caps bold 12px/30px Georgia, serif;
}
Hãy tự mình thử »Thêm ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và cách sử dụng
Thuộc tính font
là thuộc tính viết tắt của:
Các giá trị cỡ chữ và họ phông chữ là bắt buộc. Nếu thiếu một trong các giá trị khác thì giá trị mặc định của chúng sẽ được sử dụng.
Lưu ý: Thuộc tính line-height thiết lập khoảng cách giữa các dòng.
Giá trị mặc định: | Giá trị mặc định của thuộc tính phông chữ |
---|---|
Thừa hưởng: | Đúng |
Hoạt hình: | vâng, xem các thuộc tính riêng lẻ . Đọc về hoạt hình Hãy thử nó |
Phiên bản: | CSS1 |
Cú pháp JavaScript: | object .style.font="italic chữ hoa nhỏ in đậm 12px arial,sans-serif" Hãy dùng thử |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Property | |||||
---|---|---|---|---|---|
font | 1.0 | 4.0 | 1.0 | 1.0 | 3.5 |
Lưu ý: Xem hỗ trợ trình duyệt riêng lẻ cho từng giá trị bên dưới.
Cú pháp CSS
font: font-style font-variant font-weight font-size/line-height font-family |caption|icon|menu|message-box|small-caption|status-bar|initial|inherit;
Giá trị tài sản
Property/Value | Description | Demo |
---|---|---|
font-style | Specifies the font style. Default value is "normal" | Demo ❯ |
font-variant | Specifies the font variant. Default value is "normal" | Demo ❯ |
font-weight | Specifies the font weight. Default value is "normal" | Demo ❯ |
font-size / line-height | Specifies the font size and the line-height. Default value is "normal" | Demo ❯ |
font-family | Specifies the font family. Default value depends on the browser | Demo ❯ |
caption | Uses the font that are used by captioned controls (like buttons, drop-downs, etc.) | |
icon | Uses the font that are used by icon labels | |
menu | Uses the fonts that are used by dropdown menus | |
message-box | Uses the fonts that are used by dialog boxes | |
small-caption | A smaller version of the caption font | |
status-bar | Uses the fonts that are used by the status bar | |
initial | Sets this property to its default value. Read about initial | |
inherit | Inherits this property from its parent element. Read about inherit |
Thêm ví dụ
Ví dụ
Minh họa một số giá trị thuộc tính phông chữ khác.
<p style="font:caption">The browser font used in captioned controls.</p>
<p style="font:icon">The browser font used in icon labels.</p>
<p style="font:menu">The browser font used in dropdown menus.</p>
<p style="font:message-box">The browser font used in dialog boxes.</p>
<p style="font:small-caption">A smaller version of the caption font.</p>
<p style="font:status-bar">The browser font used in the status bar.</p>
Hãy tự mình thử »Trang liên quan
Hướng dẫn CSS: Phông chữ CSS
Tham chiếu DOM HTML: thuộc tính phông chữ