Yazı tipi özellik ayarları - CSS Hileleri

Anonim

Bu özellik bize küçük büyük harfler, bitişik harfler ve süslemeler gibi gelişmiş tipografik ayarlar üzerinde kontrol sağlar. Bunları etkinleştirmek için hangi değere ihtiyacınız olduğunu tırnak içinde belirtmeniz ve ardından ya 1ya onda etkinleştirmeniz gerekir. Alternatif olarak, bunları 0veya offaşağıdakilerden birini kullanarak devre dışı bırakabilirsiniz :

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

Standart bitişik harflerin yanı sıra font-feature-settings, küçük büyük harfler de dahil olmak üzere birçok başka değer özellik tarafından desteklenir :

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

Değerler

Bu, tarafından desteklenen her değerin bir listesidir font-feature-settings, ancak denemeden önce kullandığınız web yazı tipinin de bu değerleri desteklediğini kontrol ettiğinizden emin olun:

  • liga: standart bitişik harfler
  • dlig: isteğe bağlı bitişik harfler
  • onum: eski tarz figürler
  • lnum: astar rakamları
  • tnum: tablo şeklindeki şekiller
  • zero: bölü sıfır
  • frac: kesirler
  • sups: üst simge
  • subs: alt simge
  • smcp: küçük şapkalar
  • c2sc: başkentlerden küçük büyük harfler
  • case: büyük / küçük harfe duyarlı formlar
  • hlig: tarihsel bitişik harfler
  • calt: bağlamsal alternatifler
  • swsh: süslemeler
  • hist: tarihsel formlar
  • ss**: biçimsel kümeler
  • kern: karakter aralığı
  • locl: yerelleştirilmiş formlar
  • rlig: gerekli bitişik harfler
  • medi: medial formlar
  • init: ilk formlar
  • isol: izole edilmiş formlar
  • fina: son formlar
  • mark: işaret
  • mkmk mark-to-mark konumlandırma

Birden çok ayarı birleştirmek

Birden fazla özellik eklemek için, aşağıdaki gibi virgülle ayrılmış bir listede bir değeri diğerinden takip etmeniz gerekir:

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

Ön ekler

Tarayıcı yelpazesinde en iyi desteği almak için şu önekleri kullandığınızdan emin olun:

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

Tarayıcı desteği

Bu tarayıcı destek verileri, daha fazla ayrıntıya sahip olan Caniuse'den alınmıştır. Bir sayı, tarayıcının özelliği o sürümde ve sonrasında desteklediğini gösterir.

Masaüstü Bilgisayar

Krom Firefox IE Kenar Safari
21 * 15 * 10 12 9.1

Mobil / Tablet

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

Daha fazla bilgi

  • Typotheque: Web tarayıcılarındaki OpenType özellikleri - Testler
  • W3C
  • MDN
  • Richard Rutter'ın CSS3 Sandbox'ı