Свойство CSS `font-variant-emoji`

Свойство font-variant-emoji CSS задает стиль отображения эмодзи по умолчанию.

Традиционно для этого к кодовой точке эмодзи добавляли селектор варианта: U+FE0E для текста и U+FE0F для эмодзи. Это свойство затрагивает только эмодзи, перечисленные как участвующие в последовательности отображения эмодзи Unicode.

Синтаксис

/* Keyword values */
font-variant-emoji: normal;
font-variant-emoji: text;
font-variant-emoji: emoji;
font-variant-emoji: unicode;

/* Global values */
font-variant-emoji: inherit;
font-variant-emoji: initial;
font-variant-emoji: revert;
font-variant-emoji: revert-layer;
font-variant-emoji: unset;

Значения

Для этого свойства можно задать одно из следующих ключевых слов:

normal

Позволяет браузеру выбрать способ отображения эмодзи. Часто он соответствует настройке операционной системы.

text

Отображает эмодзи так, как если бы для него использовался селектор текстового варианта Unicode (U+FE0E).

emoji

Отображает эмодзи так, как если бы для него использовался селектор варианта эмодзи Unicode (U+FE0F).

unicode

Отображает эмодзи в соответствии со свойствами отображения эмодзи. Если присутствует селектор варианта U+FE0E или U+FE0F, он переопределяет это значение.

Формальное определение

Формальный синтаксис

font-variant-emoji = 
  normal |
  text |
  emoji |
  unicode

Доступность

Использование эмодзи может казаться забавным, однако следует учитывать их влияние на доступность, особенно для пользователей с нарушениями зрения и когнитивными нарушениями. При использовании эмодзи учитывайте следующие факторы:

• Отображение программами чтения с экрана: такие программы озвучивают альтернативный текст эмодзи. Учитывайте расположение эмодзи в содержимом. Частое и чрезмерное использование эмодзи негативно влияет на пользователей программ чтения с экрана. Лучше использовать эмодзи, а не смайлики из знаков препинания: такие смайлики будут озвучены как знаки препинания.

• Контраст с фоном: используя эмодзи, учитывайте их цвета и то, как они будут сочетаться с цветом фона, особенно если цвет фона может меняться, например при переключении между светлым и темным режимами.

• Цель использования: не заменяйте эмодзи слова, поскольку ваше понимание значения эмодзи может отличаться от понимания пользователей. Также учитывайте, что значения эмодзи могут различаться в разных культурах и регионах. Рекомендуем по возможности ограничиться широко известными эмодзи.

Примеры

Изменение способа отображения эмодзи

В этом примере показано, как отобразить эмодзи в варианте text или emoji.

HTML

<p class="no-support">
  Your Browser does not support <code>font-variant-emoji</code>. This image
  shows how it is rendered with support.
</p>
<img
  class="no-support"
  src="./font-variant-emoji-example.jpg"
  alt="a telephone emoji show as text, black and white next to a telephone emoji shown as emoji full color and graphical representation" />

<section class="emojis">
  <div class="emoji">
    <h2>text presentation</h2>
    <div class="text-presentation">☎</div>
  </div>
  <div class="emoji">
    <h2>emoji presentation</h2>
    <div class="emoji-presentation">☎</div>
  </div>
</section>

CSS

@supports (font-variant-emoji: emoji) {
  .no-support {
    display: none;
  }
  .emojis {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .emoji > div {
    font-size: 2rem;
  }
}

@supports not (font-variant-emoji: emoji) {
  .emojis {
    display: none;
  }
}

.text-presentation {
  font-variant-emoji: text;
}

.emoji-presentation {
  font-variant-emoji: emoji;
}

Результат

Спецификации

Совместимость с браузерами

См. также

• font-variant
• font-variant-alternates
• font-variant-caps
• font-variant-east-asian
• font-variant-ligatures
• font-variant-numeric
• Эмодзи и доступность: как правильно их использовать