Как работают эти иконки: 🌍🌎🌏✅️?

123

Я вижу эти символы в виде цветных значков:

🌍🌎🌏✅️

Это работает только в Firefox для меня. Если вы не можете видеть символы в цвете, это выглядит так в моей системе (вероятно, это зависит от шрифта):

Описание изображения

Я даже могу увидеть их в заголовках вкладок:

Описание изображения

И есть полный файл их. Я также сделал с ними анимацию document.title , которая демонстрирует, что они работают даже вне HTML.

Что это такое?

firefox unicode

— Томаш Зато
источник

Комментарии не для расширенного обсуждения; этот разговор был перемещен в чат .

— подмастерье Компьютерщик

Я использую Opera, и я определенно не вижу их так, как вы показали на картинке «это выглядит так». Итак, я испытываю желание отредактировать это вне вашего вопроса, но это не будет очень существенным ...

— Stephan Bijzitter

37

@StephanBijzitter: Тот факт , что вы и другие не видите иконки, способ почему изображение имеет важное значение. Не удаляй это.

— user2357112

3

youtube.com/watch?v=tITwM5GDIAI

— Дж.

2

Ключевое слово: OpenType-SVG ( stateofwebtype.com/#OpenType-SVG , color.typekit.com )

— Принцхорн,

145

Эти символы - смайлики, которые признаны стандартами Unicode, которые определяют, что представляет каждый символ.

Точный вид их различен для каждой ОС и каждого приложения, но все они изображают одно и то же.

Глобус (🌏) является символом Unicode 1F30Fи называется EARTH GLOBE ASIA-AUSTRALIA . 2-й (called) называется БЕЛАЯ ТЯЖЕЛАЯ ПРОВЕРКА и является Unicode 2705.

Таким образом, существуют тысячи смайликов, некоторые из которых поддерживаются каждым приложением, а некоторые с меньшей поддержкой. Смотрите полный список здесь http://www.fileformat.info/info/emoji/browsertest.htm

— Yisroel Tech
источник

56

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

— totymedli

23

На самом деле, второй (как вы сказали) БЕЛЫЙ ТЯЖЕЛЫЙ ПРОВЕРЬТЕ МАРКА в сочетании с VARIATION SELECTOR-16 . ✅️ скопированный из вопроса выглядит как белая галочка в зеленом поле, ✅ скопированный из вашего ответа выглядит как белая галочка с черной рамкой, и когда я вставляю селектор вариантов после вашей белой галочки с черной рамкой, я получаю такая же, белая галочка в зеленом поле. Скриншот этого комментария для ясности

— Stijn

4

Они могли не заметить из-за плохой поддержки шрифтов. В моем браузере зеленый фон не отображается.

— user2357112

8

@Stijn, для меня в Chrome оба они - зеленая галочка i.imgur.com/Cv5RTFM.png

— Yisroel Tech

6

Это не отвечает на вопрос о том, как он отображается в Firefox, а не о том, почему там находятся эмодзи.

— oldmud0

73

Firefox использует специальный шрифт для этих символов эмодзи . Он использует относительно новую и редко используемую функцию шрифтов TrueType: многослойные цветные глифы. Кроме этого (т.е. имея специальный шрифт с предварительно окрашенными глифами), эти значки являются обычными символами Юникода.

Windows имеет встроенную поддержку этих цветных шрифтов только в версиях 8.1 и выше , поэтому Firefox устанавливает EmojiOne в частном порядке и использует для него свой собственный рендерер шрифтов в Windows 7. Это также объясняет отсутствие красочных значков эмодзи в большинстве других приложений.

— aitap
источник

2

Если в Win10 есть встроенная поддержка многоуровневых цветных глифов, почему они по-прежнему отображаются в монохромном режиме, например, в Edge?

— Бас

5

@Bas, как мы видим через инструменты разработчика Edge, пользовательский интерфейс Segoe Emoji не выбирается для отображения этой страницы (другие монохромные шрифты делают). Вставка шрифта в атрибут font-family делает свое

— дело

4

@Bas Colored Emoji поддержка в последних предварительных версиях Edge и будет в следующей публичной версии.

— Джозия Келлер

1

Любопытно, что Firefox на моей коробке Ubuntu 16.10 отображает черные и белые глифы (я загрузился в Win10 впоследствии и подтвердил, что они действительно цветные)

— Лука,

2

@Luke Ubuntu планирует поддержку цветных глифов для Unity 8.

— Stommestack

25

Вкратце : Firefox использует шрифт, в котором эти символы выглядят так, как они.

Эти символы являются частью стандарта Unicode.

Unicode - это стандарт компьютерной индустрии для согласованного кодирования, представления и обработки текста, выраженного в большинстве мировых систем письма. Разработанная в сочетании со стандартом универсального набора кодированных символов (UCS) и опубликованная как стандарт Unicode, последняя версия Unicode содержит репертуар из более чем 128 000 символов, охватывающих 135 современных и исторических сценариев, а также несколько наборов символов. -Wikipedia

Таким образом, в отличие от ASCII (которого было очень мало), Unicode содержит несколько наборов символов. Теперь, когда стандартизировано, какой код должен представлять какой алфавит или символ, Unicode точно не определяет, как должен выглядеть символ. Таким образом, все операционные системы имеют свои собственные наборы графических символов, которые выглядят по-разному. Это может включать в себя некоторые цвета, а некоторые просто контуры или черно-белые.

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

Вы можете увидеть, как именно смайлики (для 🌍🌎🌏, перейдите к # 1483) выглядят на разных платформах здесь .

— пульсирующий воздушно-реактивный двигатель
источник

4

128 000 - это много иконок для рисования. Я не виню художников за то, что они использовали черно-белые иконки вместо полноцветных.

— Дан

@Dan, 128 000 - это количество символов, а не символов. К ним относятся и языковые символы, которых огромное количество для таких языков, как японский или мандаринский.

— PulseJet

1

@ Дан, я только имел в виду, что нет 128 000 символов, которые нужно было бы раскрасить. Не говоря уже о том, что не так много цветов, но это далеко не 128 000.

— PulseJet

1

Ах, я не хотел подразумевать, что все они должны быть раскрашены, просто того рисунка, что всего чего-либо достаточно, чтобы заставить меня не хотеть усложнять (то есть раскрашивать) кого-либо из них. Ха - ха.

— Дан

2

@ Дан никто не рисует так много кодовых точек, и почти нет шрифтов, содержащих символы для всех кодовых точек Юникода. Средство визуализации шрифта заменит глифы из другого шрифта, если текущий шрифт не содержит эти глифы. Почему нет шрифта, который содержит все символы Unicode?

— phuclv

2

Эти символы «работа» точно так же , как и другие символы, такие как a, ø, λ, ଶୁ, にи 晨, работа. Символы представлены абстрактным числом, которое используется для выбора и индексации доступного шрифта для отображения символа.

В вашей системе, кажется , что Firefox делает свою собственную визуализацию, а также имеет доступ к шрифтам , содержащим глифы 🌍, 🌎, 🌏и ✅️. В других приложениях обычно используются шрифты, предоставляемые X-сервером (или эквивалентными), поэтому ограничивайтесь шрифтами, которые вы установили или на которые указывал ваш сервер (например, с помощью xset +fpили аналогичными).

Многоцветные шрифты являются недавней и все еще довольно экспериментальной разработкой; Традиционно, глифы шрифтов представляют собой один цвет, который может быть составлен на любом фоне.

— Тоби Спейт
источник

1

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

Этот пост о графическом дизайне. Есть ли бесплатные шрифты Emoji? также может быть интересно. Без такого нестандартного значка вы должны иметь в виду, что ваш веб-сайт будет выглядеть по-разному в каждом браузере.

_{Это всего лишь список, предназначенный для того, чтобы быстрее направлять людей на смайлики и юникод.}

— RaisingAgent
источник

0

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

Традиционно символы заполнены только одним цветом. Цветные эмодзи - совершенно новая вещь, поэтому их поддержка варьируется от платформы к платформе. Для окрашивания были изобретены различные методы, такие как встроенные PNG, SVG или многослойные маски . Но все они требуют нового рендерера, который не был доступен в старых ОС.

В результате, начиная с версии 50.0, Firefox имеет собственный рендер и шрифт для поддержки цветных эмодзи. Вы можете найти это в примечаниях к выпуску

Изменено

Добавлен встроенный набор Emoji для операционных систем без встроенных шрифтов Emoji (Windows 8.0 и ниже и Linux)

Файл шрифта можно найти в %FirefoxInstallDir%\fonts\EmojiOneMozilla.ttf

— phuclv
источник