Phông chữ - Thủ thuật CSS

Các fontbất động sản trong CSS là một tài sản viết tắt kết hợp tất cả các thuộc tính con sau trong một tuyên bố duy nhất.

body ( font: normal small-caps normal 16px/1.4 Georgia; ) /* is the same as: body ( font-family: Georgia; line-height: 1.4; font-weight: normal; font-stretch: normal; font-variant: small-caps; font-size: 16px; ) */

Có bảy fontthuộc tính phụ, bao gồm:

font-stretch: thuộc tính này đặt độ rộng phông chữ, chẳng hạn như cô đọng hoặc mở rộng.
- normal
- ultra-condensed
- extra-condensed
- condensed
- semi-condensed
- semi-expanded
- expanded
- extra-expanded
- ultra-expanded
font-style: làm cho văn bản có vẻ nghiêng hoặc xiên.
- normal
- italic
- oblique
- inherit
font-variant: thay đổi văn bản mục tiêu thành chữ hoa nhỏ.
- normal
- small-caps
- inherit
font-weight: đặt trọng lượng hoặc độ dày của phông chữ.
- normal
- bold
- bolder
- lighter
- 100, 200, 300, 400, 500, 600, 700, 800, 900
- inherit
font-size: đặt chiều cao của phông chữ.
- xx-small
- x-small
- small
- medium
- large
- x-large
- xx-large
- smaller, larger
- percentage
- inherit
line-height: xác định lượng không gian trên và dưới các phần tử nội tuyến.
- normal
- number (font-size multiplier)
- percentage
font-family: xác định phông chữ được áp dụng cho phần tử.
- sans-serif
- serif
- monospace
- cursive
- fantasy
- caption
- icon
- menu
- message-box
- small-caption
- status-bar
- "string"

Font chữ viết tắt Gotchas

Các fontbất động sản không phải là đơn giản như tính viết tắt khác, một phần là do các yêu cầu cú pháp cho nó, và một phần là do các vấn đề thừa kế.

Dưới đây là tóm tắt một số điều bạn nên biết khi sử dụng thuộc tính tốc ký này.

Giá trị bắt buộc

Hai trong số các giá trị fontviết tắt là bắt buộc: font-sizevà font-family. Nếu một trong hai điều này không được bao gồm, toàn bộ khai báo sẽ bị bỏ qua.

Ngoài ra, font-familyphải được khai báo cuối cùng của tất cả các giá trị, nếu không, một lần nữa, toàn bộ khai báo sẽ bị bỏ qua.

Giá trị tùy chọn

Tất cả năm giá trị khác là tùy chọn. Nếu bạn bao gồm bất kỳ font-style, font-variantvà font-weight, họ phải đến trước font-sizetrong tờ khai. Nếu không, chúng sẽ bị bỏ qua và cũng có thể khiến các giá trị bắt buộc bị bỏ qua.

body ( font: italic small-caps bold 44px Georgia, sans-serif; )

Trong ví dụ trên, ba tùy chọn được bao gồm. Miễn là chúng được xác định trước đó font-size, chúng có thể được đặt theo bất kỳ thứ tự nào.

Việc bao gồm line-heightcũng là tùy chọn nhưng chỉ có thể được khai báo sau font-sizevà chỉ sau dấu gạch chéo:

body ( font: 44px/20px Georgia, sans-serif; )

Trong ví dụ trên, line-heightlà “20px”. Nếu bạn bỏ qua line-height, bạn cũng phải bỏ dấu gạch chéo, nếu không toàn bộ dòng sẽ bị bỏ qua.

Sử dụng font-duỗi

Các font-stretchtài sản là mới trong CSS3 vì vậy nếu nó được sử dụng trong một trình duyệt cũ không hỗ trợ font-stretchtrong fontviết tắt, nó sẽ gây ra toàn bộ dòng để được bỏ qua.

Thông số khuyến nghị bao gồm một dự phòng không có font-stretch, như thế này:

body ( font: italic small-caps bold 44px Georgia, sans-serif; /* fallback for older browsers */ font: ultra-condensed italic small-caps bold 44px Georgia, sans-serif; )

Kế thừa cho các tùy chọn

Nếu bạn bỏ qua bất kỳ giá trị line-heighttùy chọn nào (bao gồm ), các tùy chọn bị bỏ qua sẽ không kế thừa các giá trị từ phần tử mẹ của chúng, như thường xảy ra với các thuộc tính đánh máy. Thay vào đó, chúng sẽ được đặt lại về trạng thái ban đầu.

Ví dụ:

body ( font: italic small-caps bold 44px/50px Georgia, sans-serif; ) p ( font: 30px Georgia, sans-serif; )

Trong trường hợp này, các giá trị tùy chọn (in nghiêng, viết hoa nhỏ và in đậm) được đặt trên fontkhai báo trên phần tử. Những điều này cũng sẽ áp dụng cho hầu hết các phần tử con.

Tuy nhiên, vì chúng tôi đã khai báo lại thuộc fonttính trên các phần tử của đoạn văn, nên tất cả các tùy chọn sẽ được đặt lại trên các đoạn văn, khiến kiểu, biến thể, độ dày và chiều cao dòng hoàn nguyên về giá trị ban đầu của chúng.

Từ khóa để xác định phông chữ hệ thống

Ngoài cú pháp trên, thuộc fonttính cũng cho phép sử dụng các từ khóa làm giá trị. Họ đang:

caption
icon
menu
message-box
small-caption
status-bar

Các giá trị từ khóa này đặt phông chữ thành phông chữ được sử dụng trên hệ điều hành của người dùng cho danh mục cụ thể đó. Ví dụ: xác định “chú thích” sẽ đặt phông chữ trên phần tử đó để sử dụng cùng một phông chữ được sử dụng trên hệ điều hành cho các điều khiển có phụ đề (nút, menu thả xuống, v.v.).

Một từ khóa bao gồm toàn bộ giá trị:

body ( font: menu; )

Các thuộc tính khác được đề cập trước đó không hợp lệ với các từ khóa này. Các từ khóa này chỉ có thể được sử dụng với tốc fontký và không thể được khai báo bằng bất kỳ thuộc tính tốc ký riêng lẻ nào.