font-synthesis-small-caps
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since March 2023.
Thuộc tính font-synthesis-small-caps CSS cho phép bạn chỉ định liệu trình duyệt có thể tổng hợp kiểu chữ hoa nhỏ khi nó bị thiếu trong họ phông chữ hay không. Các glyph chữ hoa nhỏ thường sử dụng dạng của chữ hoa nhưng được thu nhỏ xuống kích thước của chữ thường.
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
css
/* Giá trị từ khóa */
font-synthesis-small-caps: auto;
font-synthesis-small-caps: none;
/* Giá trị toàn cục */
font-synthesis-small-caps: inherit;
font-synthesis-small-caps: initial;
font-synthesis-small-caps: revert;
font-synthesis-small-caps: revert-layer;
font-synthesis-small-caps: unset;
Giá trị
Định nghĩa chính thức
| Initial value | auto |
|---|---|
| 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-small-caps =
auto |
none
Ví dụ
Vô hiệu hóa tổng hợp kiểu chữ hoa nhỏ
Ví dụ này cho thấy việc tắt tổng hợp kiểu chữ hoa nhỏ bởi trình duyệt trong phông chữ Montserrat.
HTML
html
<p class="english">
These are the default <span class="small-caps">small-caps</span>,
<strong>bold</strong>, and <em>oblique</em> typefaces.
</p>
<p class="english no-syn">
The <span class="small-caps">small-caps</span> typeface is turned off here but
not the <strong>bold</strong> and <em>oblique</em> typefaces.
</p>
CSS
css
@import "https://fonts.googleapis.com/css2?family=Montserrat&display=swap";
.english {
font-family: "Montserrat", sans-serif;
}
.small-caps {
font-variant: small-caps;
}
.no-syn {
font-synthesis-small-caps: none;
}
Kết quả
Đặc tả
| Specification |
|---|
| CSS Fonts Module Level 4 # font-synthesis-small-caps |