Настройки на шрифта-функция - 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 Sandbox