Комментарии 15
Кхм. Вообще-то существует третий способ. Он геморройный, но он вполне валидный, а главное наиболее близкий к "нативному".
Использовать таки ttf-шрифт и подгружать его через @font-face.
Но там есть своих особенностей куча. Например, Windows поддерживает только emoji закодированные в COLR/CPAL, Linux и Android - SVG и COLR/CPAL, тогда как Apple системы - в SVG либо вообще в своём SBIX формате.
Я про это упомялу как раз на примере NotoColoEmoji.ttf. Но на текущий момент использовать в проде такой способ практически не возможно, так как весит такой шрифт очень много, например выше упомянутый около 10мб. Но впринципе можно порезать шрифт (вырезать из него неиспользуемые символы), но не уверен насколько это легально
В принципе twemoji в COLR/CPAL формате весит 6 мб в ttf, и 2 мб в woff2, что конечно многовато, но уже не настолько. Как плюс - истинно векторные эмодзи и "нативное" использование без js.
Плюс на самом деле они загружаются один раз и дальше попадают в кэш браузера, так что не так всё фатально в плане размера.
Волосатое сердце
Читал я как-то раз в интернете, что в античные времена этот символ обозначал ягодицы...
Чем обоснован ваш выбор в пользу PNG, вместо более современного формата для вектороной графики SVG?
Вы проверяли как выглядет ваши смайлики на ретина дисплеях?
Делаете запас по пикселям для ретина дисплеев? (к примеру картинка 64px показывается как 32px)
И какое максимальное разрешение сохраняете для больших эмоджи? (у вас на скрине большой эмоджи в чате без другого текста)
Векторная графика довольно ограничена с точки зрения стиля. Хотя эмодзи которые мы используем с некоторыми ограничениями возможно отрисовать в векторе. В основном наш выбор был обусловлен тем, что мы нашли готовый атлас эмодзи (мы используем эмодзи от google)
Но в принципе, если вектор позволяет реализовать все ваши хотелки, то можно использовать svg
Да, тоже хотел поднять этот вопрос. Так-то у svg огромное количество преимуществ:
- однозначно будет меньше весить, эмодзи "виндового" стиля — меньше чем 32px растр
- можно однократно внедрить на страницу через <symbol>, а потом использовать сколько угодно раз
Но конечно если нашли готовый растровый атлас и не нашли векторного — то добывать где-то вектор будет не очень оправдано.
Насчет ограничения на стили рисовки — я б поспорил. Насколько я знаю, все текущие растровые атласы эмодзи ничего особенного не требуют, максимум — цветовые градиенты (в которые svg прекрасно может). Другое дело, что "навороченные" смайлы в svg могут очень существенно вырасти в размерах, я где-то видел усеченный набор эппловских смайлов в векторе, и оно по размерам вплотную приближалось к 64px растровым иконкам этих же смайлов.
А теперь включаем мозг и задумываемся, что же на самом деле видят абоненты с их зоопарком платформ-приложений-настоек, если косяки вылезли даже при развертывании в контролируемом окружении рабочего места оператора.
Я на своём компьютере привык видеть эмоджи так, как они настроены у меня в системе.
Зачем мне переучиваться и видеть эмоджи так, как они выглядят на вашем компьютере?
Почему важно тестить на устройствах, которыми пользуются ваши пользователи, а также немного об Emoji