Các font-variant-numeric
bất động sản trong CSS hỗ trợ định dạng phông chữ OpenType bằng cách xác định mà glyphs số để sử dụng trên một lớp, trong đó có biến thể cho phân số, đánh dấu thứ tự và các biến thể theo kiểu số những người khác.
Một chút bối cảnh
Chúng ta có xu hướng nghĩ về các con số như một glyph tĩnh. Nó in và đó là cách nó là. Tuy nhiên, các con số giống các chữ cái trong bảng chữ cái hơn theo nghĩa là chúng có thể có các biến thể, tùy thuộc vào ngữ cảnh, khiến nó có giá trị sửa đổi kiểu. Chúng ta đang nói về những thứ như phân số (ví dụ 1/4), thứ tự (ví dụ: 1) và thậm chí tương đương với chữ số viết hoa và viết thường. Tuy nhiên, không giống như các chữ cái, các biến thể này không thay đổi ý nghĩa của nội dung, mặc dù chúng có bổ sung ngữ cảnh hoặc có tác động đến tính dễ đọc.
Điểm khác biệt với thuộc tính này là nó được thiết kế để hoạt động với các phông chữ hỗ trợ OpenType, một định dạng phông chữ mới nhưng phát triển nhanh chóng, cung cấp một bộ glyph rộng rãi hơn có thể được nhắm mục tiêu để sử dụng trong các ngữ cảnh khác nhau. Bạn có thể thường nghe OpenType được gọi là phông chữ biến đổi và đó là bởi vì chúng chứa nhiều ký tự hơn khiến chúng linh hoạt hơn cho nhiều mục đích sử dụng. Biến thể cho tất cả mọi thứ!
Vấn đề là sự sẵn có của các phông chữ có thể tận dụng tối đa font-variant
và font-variant-numeric
bị hạn chế. Ngày càng có nhiều phông chữ tương thích với OpenType, nhưng có một tập hợp con nhỏ hơn nhiều tùy chọn sử dụng tất cả các tính năng font-variant-numeric
cung cấp và những phông chữ đó thường cao cấp và đắt tiền. Richard Butler đã tổng kết điều này một cách độc đáo:
Chúng tôi tùy ý sử dụng các số 'viết hoa' được gọi là chữ số lót hoặc chữ số chính hiệu, và chữ số 'chữ thường' được gọi là chữ số kiểu cũ hoặc chữ số văn bản.… Cũng có trường hợp là phần lớn các phông chữ không hiện đại cũng không chuyên nghiệp, nếu hiện đại có nghĩa là OpenType- các phương tiện được kích hoạt và chuyên nghiệp được thiết kế với cả hai bộ chữ số.
Vấn đề lớn nhất mà chúng tôi thường quan tâm khi nói đến các thuộc tính CSS là hỗ trợ trình duyệt, nhưng thuộc tính này và tất cả các thuộc tính khác liên quan đến font-variant
cũng do các nhà thiết kế phông chữ hỗ trợ đầy đủ cho bảng.
Đó là một điều đáng tiếc nhưng chúng ta bắt đầu thấy nhiều phông chữ “hiện đại” và “chuyên nghiệp” xuất hiện, ngay cả tại thời điểm viết bài này. Adobe TypeKit đã thông báo rằng họ đang hoạt động để hỗ trợ các tính năng của OpenType và có tin đồn rằng Google Fonts cũng đã được đưa vào sử dụng và Chrome 62 cũng hỗ trợ chúng.
Cách sử dụng cơ bản
Đây là cách sử dụng cơ bản nhất của thuộc tính:
.fraction ( font-variant-numeric: diagonal-fractions; )
Các trình duyệt cũ hơn sẽ không nhận ra điều đó, nhưng chúng chấp nhận font-feature-settings
việc mở khóa các tính năng giống nhau với các giá trị khác nhau. Chúng tôi có thể ghép nối hai thuộc tính để hỗ trợ sâu hơn:
.fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; )
Hoặc, chúng tôi có thể điều chỉnh điều này để phát hiện hỗ trợ của trình duyệt bằng cách sử dụng @supports
để thuộc tính mới chỉ được phân phát cho các trình duyệt hỗ trợ:
.fraction ( font-feature-settings: frac; ) @supports (font-variant-numeric: diagonal-fractions) ( .fraction ( font-feature-settings: frac; font-variant-numeric: diagonal-fractions; ) )
Giá trị
Các font-variant-numeric
bất động sản chấp nhận các giá trị sau. font-feature-settings
Giá trị tương ứng được ghi chú để tham khảo.
Giá trị chung


Giá trị | Sự miêu tả | Cài đặt tính năng |
---|---|---|
normal | Không có tính năng nào được liệt kê dưới đây được bật. | N / A |
ordinal | Áp dụng các chữ cái để biểu thị thứ tự số, thường ở dạng ký tự trên. | ordn |
slashed-zero | Hiển thị dạng thay thế của số 0 với một đường chéo chạy qua nó. | zero |
Giá trị hình số


Giá trị | Sự miêu tả | Cài đặt tính năng |
---|---|---|
lining-nums | Các dòng số lên với chiều dọc để chúng tuân theo cùng một chiều cao được căn chỉnh trên cùng một mặt phẳng. | lnum |
oldstyle-nums | Cho phép căn chỉnh dọc thay thế trong đó các số không phải lúc nào cũng hiển thị đồng đều trên cùng một đường cơ sở. | onum |
Giá trị phân số


Giá trị | Sự miêu tả | Cài đặt tính năng |
---|---|---|
diagonal-fractions | Hiển thị phân số ở định dạng nhỏ hơn trong đó tử số (số trên cùng) và mẫu số (số dưới cùng) được chia bằng một dấu gạch chéo. | frac |
stacked-fractions | Hiển thị phân số ở định dạng nhỏ hơn trong đó tử số và mẫu số được xếp chồng lên nhau và được chia bởi một đường ngang. | afrc |
Giá trị khoảng cách số
Giá trị | Sự miêu tả | Cài đặt tính năng |
---|---|---|
proportional-nums | Cho phép các số chiếm khoảng không gian riêng mà không nhất thiết phải có chiều rộng bằng các chữ số khác. | pnum |
tabular-nums | Hiển thị các số có kích thước, tỷ lệ và khoảng cách bằng nhau để định dạng rõ ràng trong ngữ cảnh dữ liệu dạng bảng. | tnum |
Thông số kỹ thuật bao gồm một lưu ý đặc biệt về việc sử dụng ordinal
bởi vì nó giống với sup
phần tử chỉ số trên nhưng được đánh dấu khác.
Đối với ký tự trên:
sup ( font-variant-position: super; )
Two squared is 22
Đối với các điểm đánh dấu thứ tự:
.ordinal ( font-variant-numeric: ordinal; )
1st
Hỗ trợ trình duyệt
Các font-variant-numeric
bất động sản hiện nay là một phần của CSS Fonts Mô-đun Level 3 đặc điểm kỹ thuật, mà là ở tình trạng Khuyến nghị Candidate tại thời điểm viết bài này, có nghĩa là nó có thể thay đổi bất cứ lúc nào.
Máy tính để bàn
Trình duyệt Chrome | Cạnh | Firefox | I E | Opera | Safari |
---|---|---|---|---|---|
52 | Không | 34 | Không | 39 | 9.1 |
Firefox 24-34 (độc quyền) hỗ trợ thuộc tính đằng sau layout.css.font-features.enabled
tùy chọn khi nó được đặt thành true
.
Di động
Trình duyệt Android | Chrome Android | Cạnh | Firefox | I E | Opera Android | iOS Safari |
---|---|---|---|---|---|---|
52 | 52 | Không | 34 | Không | 39 | Đúng |