Javascript-форум - ✨☠CSS челлендж☠✨

Цитата:

Сообщение от Aetae

ещё должен был уточнить, что не только под конкретный браузер, но и под Apple

Такое уточнение было бы бессмысленно, поскольку HTML и CSS являются кроссплатформенными.

Цитата:

Сообщение от Aetae

Не знал, что [...] эмодзи ещё и выглядеть могут кардинально по разному.

Это «кардинальное» отличие относится не только к тому конкретному набору значков, но вообще ко всему набору символов Unicode! Ведь внешний вид любого символа Unicode полностью зависит от того, как он прорисован в файле шрифта.

Рассмотрите следующий пример...

<style>
	html {
		font: 200% Helvetica Neue, Segoe UI, Roboto, Ubuntu, sans-serif;
	}
</style>
<p>Этот пример выглядит по разному на разных устройствах, и вы даже можете не отличить O от 0, и l от I.</p>

Этот пример выглядит по разному на разных устройствах, и вы даже можете не отличить O от 0, и l от I. Однако никто не скажет, что такое использовать нельзя. Например, Wikipedia использует

font-family: sans-serif;

что приводит к результату, зависящему от установленных на вашем устройстве шрифтов. (Вы видите именно то, что у вас есть).

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

<style>
	@import url('https://fonts.googleapis.com/css?family=Poiret+One');
	html { font: 200% Poiret One; }
</style>
<p>Этот пример выглядит одинаково на разных устройствах.</p>

Цитата:

Сообщение от Aetae

Их же получается даже в тех минимально возможных обстоятельствах, когда они действительно бы пригодились в дизайне, и то использовать нельзя

На самом деле они используются довольно широко. За последние 5 лет тенденция использования шрифтов, в которых основная часть используемых символов не представляет письменные знаки каких-либо языков, увеличилась.

Предположим вы делаете приложение/сайт и вам потребовались значки для обозначения языка, почты, Twitter'а и Facebook'а. Вы выбрали эти:

U+1F30D EARTH GLOBE EUROPE-AFRICA (🌍 ) для обозначения языка
U+2709 ENVELOPE (✉) для обозначения почты
U+1F426 BIRD (🐦 ) для обозначения Twitter'а
U+0066 LATIN SMALL LETTER F (f) для обозначения Facebook'а

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

<style>
	html {
		font: 300% Apple Color Emoji, Segoe UI Emoji, Notocoloremoji, Segoe UI Symbol, Android Emoji, emojisymbols, Emojione Mozilla;
	}
</style>
<p>&#127757; ✉ &#128038; f </p>

В этом случае использование конкретного шрифта приводит к одинаковому отображению на всех платформах.
codepen.io/anon/pen/qMVpQG

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

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

Цитата:

Сообщение от Aetae

когда они действительно бы пригодились в дизайне, и то использовать нельзя

Я думаю, что вы всё-таки использовали триграмму неба и знак умножения! (☰ и ×)

Цитата:

Сообщение от Aetae

эти ~~пидорские~~ эмодзи

По сути это различные знаки, значки, представляющие такие предметы, как лица, погода, транспорт и здания, еда и напитки, растения и животные, и даже иконки, которые представляют какие-либо эмоции, чувства или действия. Любой отдельно взятый символ Unicode может быть знаком/значком, если отдельно взятый, он несёт какой-либо смысл. Например, вопросительный/восклицательный знак (‼⁉), дорожные знаки(⛔⛗⛛), знаки зодиака(♍♐♒), денежные знаки(€₽$) и т. д. В общем они из стандартного набора символов Unicode, целью которого является систематизация и стандартизация всех символов всех письменностей и систем обозначении мира.

Шрифты монохромны, однако почему тогда некоторые символы разноцветные? Такие шрифты как «Apple Color Emoji», «Segoe UI Emoji», «Android Emoji» были созданы компаниями Apple, Microsoft и Google соответственно. Все они разработали и использовали свои собственные проприетарные форматы цветных шрифтов, чтобы отображать «эмодзи» в их операционных системах.pixelambacht.nl/2014/multicolor-fonts

На сегодняшний день, существует 4 основных формата цветных шрифтов: SBIX от Apple, COLR от Microsoft, CBDT от Google и SVG от W3C, каждый из которых имеет свои собственные особенности.

Сейчас, когда OpenType-SVG стандартизирован, можно ожидать, что в ближайшие месяцы (или годы?) этот формат уже можно будет использовать (Microsoft Edge и Firefox уже поддерживают, также поддерживается в PS начиная с версии 2017 и в AI начиная с версии 2018).

Суть в том, что не только определённый набор символов Unicode, но и весь набор может быть цветным! Пример цветных шрифтов colorfonts.wtf

Лигатуры, которые используются уже на протяжении веков, позволяют изображать одним письменным знаком две и более букв...

<style>
    @import url('https://fonts.googleapis.com/css?family=Material+Icons');
    html { font: 200% Material Icons; }
</style>
<p>language email menu place</p>

Цитата:

Сообщение от Aetae

Caniuse же 87% — это на практике фуфло

Это как раз та причина, почему так долго не было ответа. Друзья, близкие и знакомые — 117 человек, у которых я прямым или косвенным способом узнал ответ на следующий вопрос: «Как зайти в интернет?»(непринуждённо, всё как бы между прочим... Или вариация на тему того, что мне нужно объяснить одному человеку, у которого появился вдруг телефон/планшет/лэптоп/десктоп как зайти ему в интернет, короче; но не всем, поскольку так и так знаю что и на чём запускается).

Получилось, что 67.52% используют браузер Chrome (притом 37.61% из 117 тех же людей ещё дополнительно использовали этот браузер на мобильном устройстве (телефон Android или iPhone или планшет iPad, Android или Windows 10), и 1.71% на AndroidTV). Самой популярной (51.98% из 202 устройств) ОС (на телефоне, телевизоре или планшете) оказалась Android. 19.66% используют Safari, но только 2.56% используют его на Mac (остальные 17.09% на iPhone или iPad). 6.84% используют FireFox, притом 0.85% используют его на Linux(Ubuntu), 11.11% — различные Android браузеры и 0.85% — Opera Mini. Хотя пользователи Windows (39.60% из 202 устройств) и упоминали Edge, но только в контексте того, чтобы при помощи него скачать Chrome, FireFox и даже Opera (упомянули 1.71% опрошенных, однако сами не используют). 5.13% используют на своём Android устройстве и Chrome и встроенный браузер. 5.98% и Chrome и FireFox. 7.69% опрошенных используют и Chrome и Safari.

Получилось, что Caniuse 87% — это на практике немного заниженная реальность. Я не знаю, с чем вы связываете понятие «все целевые», однако это мини-исследование, которое я провёл, показывает, что популярными браузерами являются — Chrome, Safari, Firefox, а популярными ОС — Android, Windows, iOS.

Цитата:

Сообщение от Aetae

На самом деле или требуемое поддерживается всеми целевыми браузерами, либо не поддерживается.

Главное чтобы требуемое было стандартизировано, это вам даёт гарантию, что требуемое будет работать и в будущем, даже если оно где-то сейчас не работает!