Font-tính năng-cài đặt - Thủ thuật CSS

Anonim

Thuộc tính này cho phép chúng tôi kiểm soát các cài đặt kiểu chữ nâng cao như chữ hoa nhỏ, chữ ghép và dấu gạch chéo. Để kích hoạt chúng, bạn phải khai báo giá trị nào bạn cần trong dấu ngoặc kép và theo sau là 1hoặc onđể kích hoạt. Ngoài ra, bạn có thể tắt chúng bằng một trong hai 0hoặc off:

.element ( /* these two values do the same thing */ font-feature-settings: "liga" 1; font-feature-settings: "liga1" on; )

Nhiều giá trị khác, ngoài chữ ghép chuẩn được sản phẩm hỗ trợ font-feature-settings, bao gồm các chữ hoa nhỏ:

.element ( font-feature-settings: "smcp" 1; )

Giá trị

Đây là danh sách mọi giá trị được hỗ trợ font-feature-settings, nhưng hãy nhớ kiểm tra phông chữ web mà bạn đang sử dụng cũng hỗ trợ các giá trị này trước khi thử chúng:

  • liga: chữ ghép chuẩn
  • dlig: chữ ghép tùy ý
  • onum: nhân vật kiểu cũ
  • lnum: con số lót
  • tnum: số liệu dạng bảng
  • zero: chém 0
  • frac: phân số
  • sups: chỉ số trên
  • subs: chỉ số dưới
  • smcp: mũ nhỏ
  • c2sc: chữ viết hoa nhỏ từ các chữ hoa
  • case: biểu mẫu phân biệt chữ hoa chữ thường
  • hlig: chữ ghép lịch sử
  • calt: thay thế theo ngữ cảnh
  • swsh: swash
  • hist: hình thức lịch sử
  • ss**: bộ kiểu cách
  • kern: kerning
  • locl: các hình thức bản địa hóa
  • rlig: chữ ghép bắt buộc
  • medi: hình thức trung gian
  • init: biểu mẫu ban đầu
  • isol: dạng cô lập
  • fina: hình thức cuối cùng
  • mark: dấu
  • mkmk định vị đánh dấu để đánh dấu

Kết hợp nhiều cài đặt

Để thêm nhiều tính năng, bạn cần theo dõi từng giá trị này bởi giá trị khác trong danh sách được phân tách bằng dấu phẩy, như sau:

.element ( font-feature-settings:"smcp" 1, "onum" 1; )

Tiền tố

Để nhận được hỗ trợ tốt nhất trên toàn bộ trình duyệt, hãy đảm bảo sử dụng các tiền tố sau:

.element ( -webkit-font-feature-settings: "smcp" 1; -moz-font-feature-settings: "smcp" 1; -ms-font-feature-settings: "smcp" 1; font-feature-settings: "smcp" 1; )

Hỗ trợ trình duyệt

Dữ liệu hỗ trợ trình duyệt này là từ Caniuse, có nhiều chi tiết hơn. Một con số cho biết rằng trình duyệt hỗ trợ tính năng ở phiên bản đó trở lên.

Máy tính để bàn

Trình duyệt Chrome Firefox I E Cạnh Safari
21 * 15 * 10 12 9.1

Di động / Máy tính bảng

Chrome dành cho Android Android Firefox Android iOS Safari
88 85 4,4 * 9.3

Thêm thông tin

  • Typotheque: Tính năng OpenType trong trình duyệt web - Thử nghiệm
  • W3C
  • MDN
  • Hộp cát CSS3 của Richard Rutter