Я нахожу Unicode для специальных символов из поиска FileFormat.Info .
Некоторые символы отображаются как классические черно-белые глифы, например ⚠ (предупреждающий знак \u26A0
или ⚠
). Это предпочтительнее, поскольку я могу применять к ним стили CSS (например, цвет).
Другие визуализируются как новые мультяшные эмодзи, например ⌛ (песочные часы \u231B
или ⌛
). Это нежелательно, так как я не могу полностью их стилизовать.
Похоже, что браузер вносит это изменение, поскольку я могу видеть символ песочных часов в Mac Firefox, но не в Mac Chrome или Mac Safari.
Есть ли способ заставить браузеры отображать более старые (плоские монотонные) версии для отображения?
Обновление : кажется (из комментариев ниже) есть селектор текст презентация , FE0E
, доступный для обеспечения текста-противов-смайликов. Селектор объединяется в виде суффикса без пробела в код символа, например, ⌛︎
для шестнадцатеричного HTML или \u231B\uFE0E
JS. Однако это не соблюдается всеми браузерами (например, Chrome и Edge).
︎
и\uFE0E
верны (2 и 8) и отлично работают в Safari (8 и 9), но, как сказано в ответе, поддержка браузеров нестабильна, а Chrome (46) полностью не работает.Ответы:
Добавление к вариационному селектору Unicode символа для выгонки текста, VS15,
︎
.Это заставляет предыдущий символ отображаться как текст, а не как символ эмодзи.
Результат: 🔒︎
Дополнительные сведения см. На странице : символ Unicode в виде текста или эмодзи.
источник
︎
трюк у меня не работает с некоторыми шрифтами. Мне сложно найти шрифт, который, как я могу разумно ожидать, будет установлен на всех машинах (Windows, iOS, Mac, Android и т. Д.).У меня был символ Юникода в
content
изspan::before
, и я имелfont-family
вspan
наборе для «Segoe UI Symbol». Но Chrome использовал «Segoe UI Emoji» в качестве шрифта для его визуализации.Однако, когда я установил
font-family
"Segoe UI Symbol" явно дляspan::before
, а не только дляspan
, то это сработало.источник
Для решения только с использованием CSS для предотвращения отображения смайликов в iOS вы можете использовать по
font-family: monospace
умолчанию текстовый вариант глифа, а не вариант смайликов.источник
Шрифты Android не богаты, как можно было ожидать. В файлах шрифтов нет этих экзотических глифов, а в Android есть возможность использовать несколько символов без глифов. Их заменяют значки.
Итак, решение - интегрировать сайт с веб-шрифтом (woff). Создайте новый файл шрифта с помощью FontForge и выберите необходимый глиф, например, из бесплатного шрифта с засечками TTF. Каждый глиф занимает 1к. Создать файл woff.
Подготовьте простой CSS для импорта пользовательского семейства шрифтов.
style.css:
index.html файл:
источник
Если ваша основная задача - принудительное монохроматическое отображение, чтобы смайлы не слишком выделялись из текста, вам могут понадобиться фильтры CSS, либо отдельно, либо в сочетании с селектором вариантов Unicode.
В отличие от селектора вариантов, не должно иметь значения, как отображаются смайлики, потому что фильтры CSS применяются ко всему. (Я использую их для выделения значков типа ссылки в формате PNG в оттенках серого на гиперссылках, которые были изменены, чтобы указывать на Wayback Machine.)
Только помните о нюансе . Вы не можете переопределить фильтр родительского элемента в дочернем элементе, поэтому этот метод нельзя использовать для оттенков серого абзаца, а затем перекрашивать ссылки в нем. 😢
... тем не менее, это полезно в ситуациях, когда вы либо собираетесь сделать все это гиперссылкой, либо запретить расширенную разметку внутри нее. (например, названия и описания)
Однако это не сработает, если на самом деле CSS не будет применен, поэтому я дам второй вариант, который более надежен в
<title>
элементах, чем селектор вариантов Unicode (я смотрю на вас, GitHub. Мне не нравятся поддельные значки в моем вкладки браузера):Если вы помещаете в
<title>
элемент строку, предоставленную пользователем , отфильтруйте смайлы вместе с жирным шрифтом / курсивом / подчеркиванием и т. Д. разметки. (Да, для тех, кто его пропустил, стандарт действительно требует, чтобы содержимое<title>
было простым текстом, за исключением экранирования амперсанда и браузеров, которые я тестировал, все теги интерпретируются как буквальный текст.)Я могу думать о двух способах:
emoji
пакет для базы данных, но Rust является хорошим примером языка где итерация кластеров графем выполняется быстро и легко с помощью такого ящикаunicode-segmentation
.)источник
Google Chrome, настольная версия 75, похоже, устраняет двусмысленность своего подхода к рендерингу символов Unicode на основе первого escape-кода Unicode, с которым он сталкивается при загрузке страницы. Например, при синтаксическом анализе в качестве первого escape-кода HTML Unicode в источнике страницы и не имеющем эквивалента смайликов & # 9207; похоже, проясняет Chrome, что страница содержит экраны, которые не должны отображаться как эмодзи.
источник
Расширяя ответ ssokolow , использование фильтра - это хорошо и, по крайней мере, делает контуры видимыми вместо использования простого шрифта, но преобразование цвета RGB в последовательность фильтров CSS очень сложно, если вы хотите использовать определенный цвет.
Лучше (хотя и довольно многословно) использовать
<feColorMatrix>
фильтр SVG. В сочетании с фильтром оттенков серого и схемой URI данных вы можете представлять цвет через RGB и встроенный CSS:К сожалению, вы не можете интерполировать URL-адрес с данными (взятыми из атрибутов или переменных), но, по крайней мере, вам не нужно вычислять фильтры CSS из RGB.
источник
Я не знаю, как отключить рендеринг типа эмодзи. Обычно я использую иконочный шрифт, такой как font awesome или glyphicons (поставляется с Bootstrap 3).
Преимущество их использования по сравнению с символами Юникода заключается в том, что
Единственным недостатком является то, что браузер загружает еще одну вещь, когда просматривает вашу страницу.
источник
Для меня в OSX решением было установить семейство шрифтов на
EmojiSymbols
источник
Ни одно из вышеперечисленных решений не работало с расширением «Emoji for Google Chrome».
Поэтому в качестве обходного пути я сделал снимок экрана с символом Unicode 'BALLOT BOX WITH CHECK' (U + 2611) и добавил его как изображение с помощью php:
См. Https://spacetrace.org/man_card.php?tec_id=21&techname=multi-emp-vessel
источник