font-size-adjust
Baseline
2024
Newly available
Since July 2024, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Thuộc tính font-size-adjust cho phép tác giả chỉ định một giá trị tỷ lệ cho phần tử, giúp duy trì x-height của phông chữ được chọn đầu tiên trong một phông chữ thay thế.
Note:
Với vai trò là một presentation attribute, font-size-adjust cũng có thuộc tính CSS tương ứng: font-size-adjust. Khi cả hai đều được chỉ định, thuộc tính CSS sẽ được ưu tiên.
Bạn có thể dùng thuộc tính này với các phần tử SVG sau:
Ví dụ
<svg
width="600"
height="80"
viewBox="0 0 500 80"
xmlns="http://www.w3.org/2000/svg">
<text y="20" font-family="Times, serif" font-size="10px">
Văn bản này dùng phông Times (10px), rất khó đọc ở kích thước nhỏ.
</text>
<text y="40" font-family="Verdana, sans-serif" font-size="10px">
Văn bản này dùng phông Verdana (10px), có các chữ cái thường tương đối lớn.
</text>
<text
y="60"
font-family="Times, serif"
font-size="10px"
font-size-adjust="0.58">
Đây là Times 10px, nhưng nay được điều chỉnh theo cùng tỷ lệ với Verdana.
</text>
</svg>
Lưu ý sử dụng
| Giá trị mặc định | none |
|---|---|
| Giá trị | none | <number> |
| Có thể animate | Có |
none-
Chọn kích thước phông chữ chỉ dựa trên thuộc tính
font-size. <number>-
Chọn kích thước phông chữ sao cho các chữ cái thường của nó (theo x-height của phông) bằng số lần được chỉ định của
font-size.Số được chỉ định thường nên là aspect ratio (tỷ lệ giữa x-height và kích thước phông) của họ phông
font-familyđược chọn đầu tiên. Điều này có nghĩa là phông được chọn đầu tiên, khi có sẵn, sẽ hiển thị cùng kích thước trong các trình duyệt, bất kể chúng có hỗ trợfont-size-adjusthay không.0cho ra văn bản có chiều cao bằng không (văn bản ẩn).
Thông số kỹ thuật
| Specification |
|---|
| CSS Fonts Module Level 4 # font-size-adjust-prop |
Tương thích trình duyệt
Xem thêm
- Thuộc tính CSS
font-size-adjust