font-variant-position
Baseline
Widely available
*
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2023.
* Some parts of this feature may have varying levels of support.
Thuộc tính font-variant-position CSS kiểm soát việc sử dụng các ký tự thay thế nhỏ hơn được định vị dạng chỉ số trên (superscript) hoặc chỉ số dưới (subscript).
Các ký tự được định vị so với đường cơ sở của phông chữ, đường này không thay đổi. Các ký tự này thường được sử dụng trong các phần tử <sub> và <sup>.
Khi việc sử dụng các ký tự thay thế này được kích hoạt, nếu một ký tự trong chuỗi không có ký tự được cải tiến về mặt ký pháp tương ứng, toàn bộ tập ký tự của chuỗi đó sẽ được hiển thị bằng phương pháp dự phòng, tổng hợp các ký tự đó.
Các ký tự thay thế này chia sẻ cùng hộp em và cùng đường cơ sở với phần còn lại của phông chữ. Chúng chỉ được cải thiện về mặt đồ họa và không ảnh hưởng đến chiều cao dòng hay các đặc điểm hộp khác.
Cú pháp
/* Giá trị từ khóa */
font-variant-position: normal;
font-variant-position: sub;
font-variant-position: super;
/* Giá trị toàn cục */
font-variant-position: inherit;
font-variant-position: initial;
font-variant-position: revert;
font-variant-position: revert-layer;
font-variant-position: unset;
Thuộc tính font-variant-position được chỉ định bằng một trong các giá trị từ khóa dưới đây.
Giá trị
normal-
Tắt các ký tự thay thế dạng chỉ số trên và chỉ số dưới.
sub-
Kích hoạt các ký tự thay thế dạng chỉ số dưới. Nếu trong một chuỗi, một ký tự như vậy không có sẵn cho một ký tự cụ thể, tất cả các ký tự trong chuỗi sẽ được hiển thị bằng ký tự tổng hợp.
super-
Kích hoạt các ký tự thay thế dạng chỉ số trên. Nếu trong một chuỗi, một ký tự như vậy không có sẵn cho một ký tự cụ thể, tất cả các ký tự trong chuỗi sẽ được hiển thị bằng ký tự tổng hợp.
Định nghĩa chính thức
| Initial value | normal |
|---|---|
| Applies to | all elements and text. It also applies to ::first-letter and ::first-line. |
| Inherited | yes |
| Computed value | as specified |
| Animation type | discrete |
Cú pháp chính thức
font-variant-position =
normal |
sub |
super
Ví dụ
Thiết lập dạng chỉ số trên và chỉ số dưới
HTML
<p class="normal">Normal!</p>
<p class="super">Super!</p>
<p class="sub">Sub!</p>
CSS
p {
display: inline;
}
.normal {
font-variant-position: normal;
}
.super {
font-variant-position: super;
}
.sub {
font-variant-position: sub;
}
Kết quả
Đặc tả
| Specification |
|---|
| CSS Fonts Module Level 4 # font-variant-position-prop |