Thuộc tính font-size-adjust
Thuộc tính font-size-adjust cho phép
kiểm soát kích thước phông chữ, trong khi
font-size
vẫn giữ nguyên (tăng hoặc giảm).
Ứng dụng: giả sử trong font-family
được đặt hai phông chữ phân cách bởi dấu phẩy, ví dụ,
Georgia, "Times New Roman". Giả sử
trên máy tính người dùng không có phông chữ Georgia
- trong trường hợp này "Times New Roman" sẽ được áp dụng.
Tuy nhiên, chúng ta gặp phải vấn đề - với cùng một
giá trị font-size
các phông chữ sẽ trông khác nhau. Trong ví dụ
dưới đây cả hai đoạn văn đều được đặt font-size
là 16px, nhưng font-family khác nhau.
Hãy xem sự khác biệt về kích thước:
<p style="font-size: 16px; font-family: Georgia;">
Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman';">
Lorem ipsum dolor sit amet.
</p>
:
Điều này xảy ra bởi vì kích thước hiển thị
của phông chữ phụ thuộc phần lớn không phải
vào thuộc tính font-size,
(thứ chỉ xác định kích thước tổng thể của phông chữ),
mà vào tỷ lệ giữa giá trị của thuộc tính font-size
và độ lớn x-height (x-height
là sự chênh lệch giữa kích thước chữ thường
"x" và chữ hoa "X" đối với một
phông chữ cụ thể).
Tỷ lệ này được gọi là aspect (tỉ lệ) của phông chữ và được tính theo công thức: aspect = font-size / x-height.
Vấn đề về kích thước được giải quyết bởi thuộc tính font-size-adjust
(nó cho phép thay đổi aspect của phông chữ), thuộc tính này
sẽ buộc phông chữ thứ hai trông có cùng
kích thước như phông chữ thứ nhất.
Hãy làm sao để phông chữ Times
New Roman có cùng kích thước, như
Georgia. Chúng ta biết aspect của Georgia
là 0.5 (xem bảng dưới đây).
Hãy đặt font-size-adjust cho văn bản
với Times New Roman thành giá trị 0.5
và sẽ thấy rằng văn bản thứ hai đã có cùng
kích thước như văn bản thứ nhất:
<p style="font-size: 16px; font-family: Georgia;">
Lorem ipsum dolor sit amet.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
Lorem ipsum dolor sit amet.
</p>
:
Cú pháp
selector {
font-size-adjust: number | none;
}
Giá trị
| Giá trị | Mô tả |
|---|---|
number |
Số xác định aspect của phông chữ. |
none |
Không điều chỉnh kích thước phông chữ. |
Giá trị mặc định: none.
Làm thế nào để xác định giá trị aspect cho một phông chữ?
Hãy xem đoạn trích từ đặc tả kỹ thuật W3C:
Hệ số tỷ lệ (aspect) cho
các phông chữ được chọn có thể được tính toán bằng cách
so sánh cùng một văn bản, nhưng với giá trị
font-size-adjust khác nhau. Nếu giá trị
thuộc tính được chọn đúng, thì với cùng kích thước
phông chữ văn bản sẽ không thay đổi cho tất cả
các phông chữ được sử dụng trên trang.
Tôi cung cấp các giá trị aspect đã biết cho
một số phông chữ: Georgia - 0.5,
Times New Roman - 0.46, Verdana -
0.58.
Ví dụ
Hãy so sánh văn bản trông như thế nào với các giá trị khác nhau của
font-size-adjust và cùng font-size
và font-family:
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: none;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.5;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
<p style="font-size: 16px; font-family: 'Times New Roman'; font-size-adjust: 0.6;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</p>
:
Ví dụ . Ứng dụng trong thực tế
Mã dưới đây thực hiện việc: trong trường hợp không có
phông chữ Georgia trên máy tính
của người dùng,
phông chữ được áp dụng Times New Roman
sẽ có cùng kích thước như Georgia:
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elitorire
aenean a dapibus magna, ac interdum nisl suspendisse egetile.
</p>
p {
font-size: 16px;
font-family: Georgia, "Times New Roman";
font-size-adjust: 0.5;
}
:
