font-synthesis-style
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 CSS font-synthesis-style cho phép bạn chỉ định liệu trình duyệt có được phép tổng hợp kiểu chữ oblique khi kiểu chữ đó không có sẵn trong bộ phông chữ hay không.
Thông thường, thuận tiện hơn 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-style: auto;
font-synthesis-style: none;
font-synthesis-style: oblique-only;
/* Giá trị toàn cục */
font-synthesis-style: inherit;
font-synthesis-style: initial;
font-synthesis-style: revert;
font-synthesis-style: revert-layer;
font-synthesis-style: unset;
Giá trị
auto-
Cho biết rằng trình duyệt có thể tổng hợp kiểu chữ oblique còn thiếu nếu cần.
none-
Cho biết rằng việc tổng hợp kiểu chữ oblique còn thiếu bởi trình duyệt không được phép.
oblique-only-
Giống như
auto, nhưng không có tổng hợp phông chữ xảy ra nếufont-style: italicđược đặt.
Định nghĩa hì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 hình thức
font-synthesis-style =
auto |
none |
oblique-only
Ví dụ
Tắt tổng hợp kiểu chữ oblique
Ví dụ này cho thấy cách tắt tổng hợp kiểu chữ oblique bởi trình duyệt trong phông chữ Montserrat.
HTML
<p class="english">
This is the default <em>oblique typeface</em> and
<strong>bold typeface</strong>.
</p>
<p class="english no-syn">
The <em>oblique typeface</em> is turned off here but not the
<strong>bold typeface</strong>.
</p>
CSS
@import "https://fonts.googleapis.com/css2?family=Montserrat&display=swap";
.english {
font-family: "Montserrat", sans-serif;
}
.no-syn {
font-synthesis-style: none;
}
Kết quả
So sánh các giá trị font-synthesis-style
Ví dụ này so sánh tất cả các giá trị font-synthesis-style sử dụng văn bản được định dạng italic và oblique.
HTML
<div class="fss-none">
<h2>font-synthesis-style: none</h2>
<p class="oblique">This text is set to <code>oblique</code></p>
<p class="italic">This text is set to <code>italic</code></p>
</div>
<div class="fss-auto">
<h2>font-synthesis-style: auto</h2>
<p class="oblique">This text is set to <code>oblique</code></p>
<p class="italic">This text is set to <code>italic</code></p>
</div>
<div class="fss-oblique-only">
<h2>font-synthesis-style: oblique-only</h2>
<p class="oblique">This text is set to <code>oblique</code></p>
<p class="italic">This text is set to <code>italic</code></p>
</div>
CSS
/* Chỉ định kiểu tổng hợp phông chữ */
.fss-none {
font-synthesis-style: none;
}
.fss-auto {
font-synthesis-style: auto;
}
.fss-oblique-only {
font-synthesis-style: oblique-only;
}
/* Đặt kiểu phông chữ */
.oblique {
font-style: oblique;
}
.italic {
font-style: italic;
}
/* Kiểu cho phần minh họa */
.oblique::after {
content: " (font-style: oblique)";
font-size: 0.8rem;
vertical-align: sub;
}
.italic::after {
content: " (font-style: italic)";
font-size: 0.8rem;
vertical-align: sub;
}
Kết quả
Thông số kỹ thuật
| Thông số kỹ thuật |
|---|
| CSS Fonts Module Level 4 # font-synthesis-style |