Шрифт-функція-налаштування - CSS-хитрощі

Anonim

Ця властивість дає нам можливість керувати розширеними типографськими налаштуваннями, такими як маленькі ковпачки, лігатури та зразки. Щоб їх активувати, ви повинні вказати, яке значення вам потрібно в лапках, а потім слідувати 1або, onщоб увімкнути. Крім того, ви можете вимкнути їх за допомогою одного 0або off:

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

Багато інших значень, крім стандартних лігатур, підтримуються font-feature-settingsвластивістю, включаючи маленькі літери:

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

Цінності

Це перелік усіх значень, які підтримуються font-feature-settings, але переконайтеся, що перевіряєте веб-шрифт, який ви використовуєте, також підтримує ці значення, перш ніж випробувати їх:

  • liga: стандартні лігатури
  • dlig: дискретні лігатури
  • onum: фігури старого стилю
  • lnum: фігури підкладки
  • tnum: табличні цифри
  • zero: косий нуль
  • frac: дроби
  • sups: верхній індекс
  • subs: індекс
  • smcp: маленькі ковпачки
  • c2sc: малі капітелі від столиць
  • case: регістри, що враховують регістр
  • hlig: історичні лігатури
  • calt: контекстуальні альтернативи
  • swsh: смужки
  • hist: історичні форми
  • ss**: стилістичні набори
  • kern: кернінг
  • locl: локалізовані форми
  • rlig: необхідні лігатури
  • medi: медіальні форми
  • init: початкові форми
  • isol: ізольовані форми
  • fina: підсумкові форми
  • mark: позначка
  • mkmk позиціонування від марки до марки

Поєднання кількох налаштувань

Щоб додати кілька функцій, вам потрібно дотримуватися одне значення за іншим у списку, розділеному комами, приблизно так:

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

Префікси

Щоб отримати найкращу підтримку у всьому спектрі браузера, обов’язково використовуйте такі префікси:

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

Підтримка браузера

Дані про підтримку веб-переглядача подані компанією Caniuse, яка містить більше деталей. Цифра вказує на те, що браузер підтримує цю функцію на цій версії та вище.

Робочий стіл

Chrome Firefox IE Край Сафарі
21 * 15 * 10 12 9.1

Мобільний / планшетний

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

Більше інформації

  • Типотека: Функції OpenType у веб-браузерах - Тести
  • W3C
  • MDN
  • Пісочниця CSS3 Річарда Руттера