font-synthesis-position
Khả dụng hạn chế
This feature is not Baseline because it does not work in some of the most widely-used browsers.
Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.
Thuộc tính font-synthesis-position CSS cho phép bạn chỉ định liệu trình duyệt có thể tổng hợp các kiểu chữ chỉ số dưới và trên "position" khi chúng bị thiếu trong họ phông chữ, trong khi sử dụng font-variant-position để thiết lập vị trí hay không.
Thuộc tính font-synthesis-position không có hiệu ứng khi sử dụng các phần tử <sup> và <sub>.
Thường tiện lợi khi sử dụng thuộc tính viết tắt font-synthesis để kiểm soát tất cả các giá trị tổng hợp kiểu chữ.
Cú pháp
/* Giá trị từ khóa */
font-synthesis-position: auto;
font-synthesis-position: none;
/* Giá trị toàn cục */
font-synthesis-position: inherit;
font-synthesis-position: initial;
font-synthesis-position: revert;
font-synthesis-position: revert-layer;
font-synthesis-position: unset;
Giá trị
Định nghĩa chính thức
| Initial value | none |
|---|---|
| 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-synthesis-position =
auto |
none
Ví dụ
Vô hiệu hóa tổng hợp kiểu chữ position
Ví dụ này cho thấy việc tắt tổng hợp kiểu chữ chỉ số trên và dưới bởi trình duyệt trong phông chữ Montserrat.
HTML
<p>
These are the default position <span class="super">superscript</span>,
position <span class="sub">subscript</span>, <strong>bold</strong> and
<em>oblique</em> typefaces.
</p>
<p class="no-syn">
The positions <span class="super">superscript</span> and
<span class="sub">subscript</span> typeface is turned off here but not the
<strong>bold</strong> and <em>oblique</em> typefaces (on browsers that support
<code>font-synthesis-position</code>).
</p>
CSS
@import "https://fonts.googleapis.com/css2?family=Montserrat&display=swap";
* {
font-family: "Montserrat", sans-serif;
}
.super {
font-variant-position: super;
}
.sub {
font-variant-position: sub;
}
.no-syn {
font-synthesis-position: none;
}
Kết quả
Đặc tả
| Thông số kỹ thuật |
|---|
| CSS Fonts Module Level 4 # font-synthesis-position |