Font-feature-settings - Trik CSS

Anonim

Properti ini memberi kita kendali atas pengaturan tipografi lanjutan seperti huruf kecil, ligatur, dan garis miring. Untuk mengaktifkannya, Anda harus mendeklarasikan nilai mana yang Anda butuhkan dalam tanda kutip dan kemudian diikuti dengan salah satu 1atau onuntuk mengaktifkan. Atau, Anda dapat menonaktifkannya dengan salah satu 0atau off:

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

Banyak nilai lain, selain ligatur standar yang didukung oleh font-feature-settingsproperti, termasuk tutup kecil:

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

Nilai

Ini adalah daftar setiap nilai yang didukung oleh font-feature-settings, tapi pastikan untuk memeriksa font web yang Anda gunakan mendukung nilai-nilai ini juga sebelum mencobanya:

  • liga: pengikat standar
  • dlig: ligatur diskresioner
  • onum: tokoh gaya lama
  • lnum: angka lapisan
  • tnum: gambar tabel
  • zero: garis miring nol
  • frac: pecahan
  • sups: superscript
  • subs: subskrip
  • smcp: topi kecil
  • c2sc: ibu kota kecil dari ibu kota
  • case: bentuk case-sensitive
  • hlig: ligatur historis
  • calt: alternatif kontekstual
  • swsh: swash
  • hist: bentuk sejarah
  • ss**: set gaya
  • kern: kerning
  • locl: formulir yang dilokalkan
  • rlig: ligatur yang dibutuhkan
  • medi: bentuk medial
  • init: bentuk awal
  • isol: bentuk terisolasi
  • fina: bentuk akhir
  • mark: tandai
  • mkmk pemosisian mark-to-mark

Menggabungkan beberapa pengaturan

Untuk menambahkan beberapa fitur, Anda perlu mengikuti satu nilai dengan nilai lainnya dalam daftar yang dipisahkan koma, seperti:

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

Awalan

Untuk mendapatkan dukungan terbaik di seluruh spektrum browser, pastikan untuk menggunakan prefiks ini:

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

Dukungan browser

Data dukungan browser ini berasal dari Caniuse, yang lebih detail. Angka menunjukkan bahwa browser mendukung fitur pada versi tersebut dan yang lebih baru.

Desktop

Chrome Firefox YAITU Tepi Safari
21 * 15 * 10 12 9.1

Ponsel / Tablet

Android Chrome Android Firefox Android iOS Safari
88 85 4,4 * 9.3

Informasi lebih lanjut

  • Typotheque: Fitur OpenType di browser web - Tes
  • W3C
  • MDN
  • Kotak Pasir CSS3 Richard Rutter