Fon-ciri-tetapan - Trik CSS

Anonim

Properti ini memberi kita kawalan terhadap tetapan tipografi canggih seperti topi kecil, ligatur, dan swash. Untuk mengaktifkannya, anda mesti menyatakan nilai yang anda perlukan dalam petikan dan kemudian diikuti oleh salah satu 1atau onuntuk mengaktifkannya. Sebagai alternatif, anda boleh melumpuhkannya 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 standard yang disokong oleh font-feature-settingsharta tanah, termasuk topi kecil:

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

Nilai

Ini adalah senarai setiap nilai yang didukung oleh font-feature-settings, tetapi pastikan untuk memeriksa fon web yang anda gunakan juga menyokong nilai-nilai ini sebelum mencubanya:

  • liga: ligatur standard
  • dlig: ligatur budi bicara
  • onum: tokoh gaya lama
  • lnum: angka lapisan
  • tnum: angka jadual
  • zero: dipotong sifar
  • frac: pecahan
  • sups: superskrip
  • subs: langganan
  • smcp: topi kecil
  • c2sc: modal kecil dari ibu negara
  • case: bentuk sensitif kes
  • hlig: ligatur sejarah
  • calt: silih berganti kontekstual
  • swsh: pusing
  • hist: bentuk sejarah
  • ss**: set gaya
  • kern: kerning
  • locl: bentuk setempat
  • rlig: ligatur yang diperlukan
  • medi: bentuk medial
  • init: bentuk awal
  • isol: bentuk terpencil
  • fina: bentuk akhir
  • mark: tanda
  • mkmk kedudukan mark-to-mark

Menggabungkan pelbagai tetapan

Untuk menambahkan beberapa ciri, anda perlu mengikuti satu nilai dengan yang lain dalam senarai yang dipisahkan dengan koma, seperti:

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

Awalan

Untuk mendapatkan sokongan terbaik di seluruh spektrum penyemak imbas, pastikan untuk menggunakan awalan berikut:

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

Sokongan penyemak imbas

Data sokongan penyemak imbas ini berasal dari Caniuse, yang mempunyai lebih terperinci. Nombor menunjukkan bahawa penyemak imbas menyokong ciri pada versi dan ke atas.

Desktop

Chrome Firefox IE Hujung Safari
21 * 15 * 10 12 9.1

Mudah Alih / Tablet

Android Chrome Android Firefox Android Safari iOS
88 85 4.4 * 9.3

Maklumat lanjut

  • Typotheque: Ciri OpenType dalam penyemak imbas web - Ujian
  • W3C
  • MDN
  • Kotak Pasir CSS3 Richard Rutter