font-variant-emoji

/* 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;

Свойство font-variant-emoji задается с помощью одного ключевого слова из списка ниже.

normal

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

text

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

emoji

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

unicode

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

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

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

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

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

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

Этот пример показывает, как можно отобразить смайлик в его text или emoji представлении.

HTML

<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

.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
• Смайлики и доступность: Как правильно их использовать