font-style
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
Descriptor font-style trong CSS cho phép tác giả chỉ định kiểu dáng phông chữ cho các phông chữ được khai báo trong quy tắc at-rule @font-face.
Với một họ phông chữ cụ thể, tác giả có thể tải về các font face tương ứng với các kiểu dáng khác nhau của cùng họ phông chữ, rồi sử dụng descriptor font-style để chỉ định rõ ràng kiểu dáng của font face đó. Các giá trị cho descriptor CSS này giống với các giá trị của thuộc tính font-style tương ứng.
Cú pháp
font-style: normal;
font-style: italic;
font-style: oblique;
font-style: oblique 30deg;
font-style: oblique 30deg 50deg;
Giá trị
normal-
Chọn phiên bản bình thường của họ phông chữ.
italic-
Chỉ định rằng font face là phiên bản in nghiêng (italic) của phông chữ bình thường.
oblique-
Chỉ định rằng font face là phiên bản nghiêng nhân tạo của phông chữ bình thường.
obliquevới góc-
Chọn phông chữ được phân loại là
oblique, đồng thời chỉ định thêm góc nghiêng cho văn bản. obliquevới dải góc-
Chọn phông chữ được phân loại là
oblique, đồng thời chỉ định dải góc nghiêng được phép cho văn bản. Lưu ý rằng dải góc chỉ được hỗ trợ khifont-stylelàoblique; vớifont-style: normalhoặcitalic, không cho phép giá trị thứ hai.
Định nghĩa hình thức
| Related at-rule | @font-face |
|---|---|
| Initial value | normal |
| Computed value | as specified |
Cú pháp hình thức
font-style =
auto |
normal |
italic |
left |
right |
oblique [ <angle [-90deg,90deg]>{1,2} ]?
Ví dụ
Chỉ định kiểu dáng phông chữ in nghiêng
Ví dụ, xét họ phông chữ garamond ở dạng bình thường, ta có kết quả sau:
@font-face {
font-family: "garamond";
src: url("garamond.ttf");
}
Phiên bản in nghiêng của văn bản này sử dụng các glyph có trong phiên bản chưa định kiểu, nhưng chúng được nghiêng nhân tạo đi vài độ.
Mặt khác, nếu tồn tại phiên bản in nghiêng thực sự của họ phông chữ, chúng ta có thể đưa nó vào descriptor src và chỉ định kiểu dáng phông chữ là italic, để rõ ràng phông chữ đó là in nghiêng. Chữ in nghiêng thực sự sử dụng các glyph khác nhau và có sự khác biệt so với chữ đứng, có các đặc điểm riêng và thường có chất lượng tròn trịa, viết tay hơn. Các phông chữ này được các nhà thiết kế phông chữ tạo ra đặc biệt và không phải là nghiêng nhân tạo.
@font-face {
font-family: "garamond";
src: url("garamond-italic.ttf");
font-style: italic;
}
Đặc tả
| Thông số kỹ thuật |
|---|
| CSS Fonts Module Level 4 # font-prop-desc |