Font-variant-numeric - Thủ thuật CSS

Anonim

Các font-variant-numericbấ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-variantfont-variant-numericbị 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-numericcung 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-variantcũ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-settingsviệ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-numericbất động sản chấp nhận các giá trị sau. font-feature-settingsGiá 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 ordinalbởi vì nó giống với supphầ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-numericbấ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.enabledtù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