font-feature-settings
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since April 2017.
Thuộc tính font-feature-settings CSS kiểm soát các tính năng kiểu chữ nâng cao trong font OpenType.
Try it
font-feature-settings: normal;
font-feature-settings: "liga" 0;
font-feature-settings: "tnum";
font-feature-settings: "smcp", "zero";
<section id="default-example">
<div id="example-element">
<p>Difficult waffles</p>
<table>
<tbody>
<tr>
<td><span class="tabular">0O</span></td>
</tr>
<tr>
<td><span class="tabular">3.14</span></td>
</tr>
<tr>
<td><span class="tabular">2.71</span></td>
</tr>
</tbody>
</table>
</div>
</section>
@font-face {
font-family: "Fira Sans";
src:
local("FiraSans-Regular"),
url("/shared-assets/fonts/FiraSans-Regular.woff2") format("woff2");
font-weight: normal;
font-style: normal;
}
section {
font-family: "Fira Sans", sans-serif;
margin-top: 10px;
font-size: 1.5em;
}
#example-element table {
margin-left: auto;
margin-right: auto;
}
.tabular {
border: 1px solid;
}
Cú pháp
/* Sử dụng cài đặt mặc định */
font-feature-settings: normal;
/* Đặt giá trị cho thẻ tính năng OpenType */
font-feature-settings: "smcp";
font-feature-settings: "smcp" on;
font-feature-settings: "swsh" 2;
font-feature-settings:
"smcp",
"swsh" 2;
/* Giá trị toàn cục */
font-feature-settings: inherit;
font-feature-settings: initial;
font-feature-settings: revert;
font-feature-settings: revert-layer;
font-feature-settings: unset;
Bất cứ khi nào có thể, các tác giả web nên dùng thuộc tính viết tắt font-variant hoặc thuộc tính dài liên quan như font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric hoặc font-variant-position.
Các thuộc tính này cho kết quả hiệu quả, có thể dự đoán và dễ hiểu hơn font-feature-settings, vốn là tính năng cấp thấp được thiết kế để xử lý các trường hợp đặc biệt khi không có cách nào khác để bật hoặc truy cập tính năng font OpenType. Đặc biệt, font-feature-settings không nên được dùng để bật chữ hoa nhỏ.
Các giá trị
Thuộc tính này được chỉ định là từ khóa normal hoặc danh sách các giá trị <feature-tag-value> phân cách bằng dấu phẩy. Khi hiển thị văn bản, danh sách các giá trị <feature-tag-value> OpenType được truyền tới công cụ bố cục văn bản để bật hoặc tắt các tính năng font.
normal-
Chỉ ra rằng văn bản được bố cục bằng các cài đặt font mặc định. Đây là giá trị mặc định.
<feature-tag-value>-
Biểu diễn một bộ phân cách bằng khoảng trắng gồm tên thẻ và một giá trị tùy chọn.
- Tên thẻ
-
Tên thẻ luôn là một
<string>gồm bốn ký tự ASCII. Nếu tên thẻ có nhiều hoặc ít hơn bốn ký tự hoặc chứa các ký tự ngoài phạm vi mã điểmU+20–U+7E, bộ mô tả không hợp lệ. - Giá trị tùy chọn
-
Giá trị tùy chọn có thể là số nguyên dương hoặc từ khóa
onhayoff. Các từ khóaonvàofflà từ đồng nghĩa với các giá trị1và0tương ứng. Nếu không có giá trị được đặt, giá trị mặc định là1. Đối với các tính năng OpenType không phải boolean (ví dụ: kiểu chữ thay thế), giá trị ám chỉ một glyph cụ thể được chọn; đối với các tính năng boolean, giá trị bật hoặc tắt tính năng.
Định nghĩa hì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 hình thức
font-feature-settings =
normal |
<feature-tag-value>#
<feature-tag-value> =
<opentype-tag> [ <integer [0,∞]> | on | off ]?
<opentype-tag> =
<string>
<integer> =
<number-token>
Ví dụ
Bật các tính năng font khác nhau
/* dùng glyph chữ hoa nhỏ thay thế */
.small-caps {
font-feature-settings: "smcp" on;
}
/* chuyển cả chữ hoa và thường thành chữ hoa nhỏ (ảnh hưởng đến dấu câu) */
.all-small-caps {
font-feature-settings: "c2sc", "smcp";
}
/* dùng số 0 có gạch chéo để phân biệt với "O" */
.nice-zero {
font-feature-settings: "zero";
}
/* bật các dạng lịch sử */
.historical {
font-feature-settings: "hist";
}
/* tắt ligaturs thông thường, thường bật theo mặc định */
.no-ligatures {
font-feature-settings: "liga" 0;
}
/* bật các chữ số dạng bảng (monospaced) */
td.tabular {
font-feature-settings: "tnum";
}
/* bật phân số tự động */
.fractions {
font-feature-settings: "frac";
}
/* dùng ký tự swash thứ hai khả dụng */
.swash {
font-feature-settings: "swsh" 2;
}
/* bật bộ phong cách 7 */
.fancy-style {
font-family: "Gabriola", cursive;
font-feature-settings: "ss07";
}
Thông số kỹ thuật
| Specification |
|---|
| CSS Fonts Module Level 4 # font-feature-settings-prop |