Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 12.09.2018, 01:54
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от 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
На самом деле или требуемое поддерживается всеми целевыми браузерами, либо не поддерживается.
Главное чтобы требуемое было стандартизировано, это вам даёт гарантию, что требуемое будет работать и в будущем, даже если оно где-то сейчас не работает!

Последний раз редактировалось Malleys, 12.09.2018 в 02:10.
Ответить с цитированием
  #12 (permalink)  
Старый 12.09.2018, 02:16
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

Malleys,
во ты заморочился.
Ответить с цитированием
  #13 (permalink)  
Старый 12.09.2018, 09:21
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,068

Malleys,
Ответить с цитированием
  #14 (permalink)  
Старый 17.01.2019, 15:29
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

CSS головоломка! Градиентная рамка пунктиром.

Ограничения:
• 1 div, без псевдо-элементов
• настоящая прозрачность повсюду, без подложки
• как максимум 7 CSS объявлении для div (просвечиваемый фон от body не считается)
• без картинок (разрешаются CSS градиенты), без SVG, без JS



Получается при помощи только 5 объявлении, но...
1. Chrome оказался особенным (1 дополнительное объявление) ☹️
2. и имеет баг (ещё 1 объявление чтобы исправить)
Ответить с цитированием
Ответ


Опции темы Искать в теме
Искать в теме:

Расширенный поиск