CSS font-feature-settings — можливості OpenType

Властивість font-feature-settings дає вам контроль над функціями шрифту OpenType.

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

Щоб активізувати потрібну функцію, Ви повинні написати її назву у лапках, після чого слід прописати число 1 (або ключове слово on) аби ввімкнути її. Крім того, ви можете вимкнути дію функції за допомогою числа 0 (або ключове слово off):

.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;
}

правити

Загальний опис

правити

Порада

По можливості розробники повинні використовувати властивість font-variant шрифту або відповідні довгі властивості font-variant-ligatures, font-variant-caps, font-variant-east-asian, font-variant-alternates, font-variant-numeric або font-variant- position.

автор: Svitlana правити

+ додати пораду чи нотатку

Синтаксис

<feature-tag-value> = <string> [ <integer> | on | off ]?

Властивість font-feature-settings може отримувати 2 значень:

normal

Текст друкується з параметрами без задання.

автор: Svitlana

правити

<feature-tag-value>

При відтворенні тексту список властивостей тегу функцій OpenType передається рушію макета тексту, щоб увімкнути або вимкнути функції шрифту.

Теґ завжди є рядком з 4 символів ASCII. Якщо він має більше або менше символів або містить символи за межами діапазону U+20 - U+7E, то властивість буде недійсна.

Значення - це позитивне ціле число. Декілька ключових слів - це синоніми для 1 і 0, відповідно. Якщо значення не задано, за замовчуванням це 1. Для небуолейових функцій OpenType (наприклад, стилістичних альтернатив) значення означає виділення певного гліфа; для логічних значень це перемикач.

автор: Svitlana

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	48	34	9.1	35	15	10

Підтримка: мобільні переглядачі

Переглядач
	4.4	48	34	9.3

Приклади

+ запропонувати свій приклад у пісочниці

<p>Звичайний текст: Приклад Тексту</p>
<p class="smcp">Той самий зі "smcp": Приклад Тексту</p>

.smcp {
    font-feature-settings: "smcp" on;
}

<p>Цей приклад показує як працює властивість <code>font-feature-settings</code>. Спробуйте вимкнути/ввімкнути перемикач, щоб змінити відображення тексту нижче. Зверніть увагу, що властивість може не підтримуватися Вашим браузером.</p>

<p>У цьому прикладі, ми можемо уввімкнути або вимкнути функцію, яка довзоляє браузеру відображати стандартні лігатури.</p>

<div class="inputs">
  <input id="off" checked name="font-feature-settings" type="radio"/>
  <label for="off">off</label>
  <message for="off">Вимкнено.</message>
  
  <input id="on" name="font-feature-settings" type="radio"/>
  <label for="on">on</label>
  <message for="on">Уввімкнено.</message>
</div>

<p id="message">Вимкнено.</p>

<hr>

<p id="block">fi</p>

* {
  box-sizing: border-box;
  padding: 0;
}

body {
  font-family: sans-serif;
}

#block {
  font-size: 7.5em; 
  text-align: center;
  margin-top: 0;
  font-family: "DejaVu Serif", "Times New Roman", Georgia, serif;
  font-feature-settings: "liga" off;
}

message {
  display: none;
}

const message = document.querySelector('#message');

document.querySelectorAll('.inputs input').forEach((el) => el.addEventListener('change', function () {

  var messageText = document.querySelector("message[for='" + this.id + "']");
  message.textContent = messageText?.textContent ?? '';

  document.getElementById('block').style.fontFeatureSettings = '"liga" ' + this.id;

}));

<p class="plain">Довідник CSS — звичайний текст</p>
<p class="caps">Довідник CSS — font-variant-caps: small-caps</p>
<p class="feat">Довідник CSS — font-feature-settings: "smcp" 1</p>

body {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 22px;
  padding: 12px;
}

p {
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid #dde4ef;
}

.caps {
  font-variant-caps: small-caps;
}

.feat {
  font-feature-settings: "smcp" 1;
}

<div class="block">
  <p class="text">Задана властивість: <code>font-feature-settings: "liga" off;</code></p>
  <span class="off">fi</span>
</div>
<div class="block">
   <p class="text">Задана властивість: <code>font-feature-settings: "liga" on;</code></p>
  <span class="on">fi</span>
</div>

body {
  font-family: "DejaVu Serif", "Times New Roman", Georgia, serif;
  font-size: 35vw;
  display: flex;
  text-align: center;
}
code{
  font-weight: bold;
}
.text{
  font-size: 20px;
}
.off {
  font-feature-settings: "liga" off;
  color: gray;
}

.on {
  font-feature-settings: "liga" on;
  color: blue;
}