Unicode не отображается в браузере
Обновлено: 17.07.2024
Случалось ли Вам получать и читать письма на “фиг каком пойми языке” или заходить на какой-нибудь интернет-ресурс и вместо привычных букв видеть сплошные кракозябры? Если да, тогда эта заметка для Вас, ибо в ней мы поговорим о кодировке страниц, её форматах, почему оная возникает и как впредь избежать непонятных иероглифов.
Итак, сегодня нас ждет не легкая софтовая статья, а суровая техническая, так что приготовьтесь: будем немного ударяться в суровые реалии.
Поехали.
Что такое кодировка текста и с чем ее едят?
Начать хотелось бы с того, что этой статьи могло бы и не быть, т.к. компьютерно-юзательная жизнь автора этих строк протекала вполне себе спокойно и достойно. Но вот в один прекрасный день, шляясь по просторам сети Интернет не со своего ПК, я столкнулся с непонятными явлениями на некоторых сайтах. Заходя на интернет-ресурсы, я видел не привычный нам русский алфавит и красивый понятный текст, а какую-то ересь в виде непонятной последовательности символов. Выглядела она примерно вот так (см. изображение).
Сначала я подумал, что моя любимая Мозилка (браузер Firefox) перегрелась и ей пора вызывать неотложку, но потом начал понимать, что проблема, скорее всего, на стороне ресурса сети и кроется она в неправильно настроенной кодировке. Это действительно оказалось так, и пошаманив немного с бубном, проблемка была оперативно решена. Результатом же всех моих любовных похождений и стал сегодняшний материал. Собственно, поехали разбираться в деталях.
Всю информацию, представленную в цифровом виде и находящуюся в глобальной паутине, нужно рассматривать с двух сторон: первая - со стороны пользователя (красивый и ухоженный текст на экране монитора) и вторая – со стороны поисковой машины (некий программный код, состоящий из различных тегов/метатегов, таблицы символов и прочее).
Если Вы хоть немного знакомы с языком разметки гипертекста ( HTML ), то должны быть в курсе, что сайт глазами поисковых машин (Google, Яндекс ) видится не как обычный текст, а как структурированный документ, состоящий из последовательностей различного рода тегов. Чтобы было понятней, о чем я говорю, давайте взглянем на всеми нами любимый сайт Заметки Сис.Админа ” проекта [ Sonikelf's Project's ], но не глазами обычного пользователя, а "глазами" поисковика. Для этого нажимаем сочетание клавиш Сtrl+U (для браузеров Firefox и Chrome ) и видим следующую картину (см. изображение):
Теперь давайте разберемся, почему же происходит так, что порой на экране монитора мы видим кракозябры. Все очень просто, проблема кроется в открытии файла в неверной кодировке. Если перевести на бытовой язык, то допустим Вас послали в магазин за молоком, а Вы притарабанили хлеб, вроде бы тоже съестное, но совсем другой формат продукта.
Итак, теперь давайте разбираться с теорией и для этого введем некоторые определения.
- Кодировка (или “ Charset ”) – соответствие набора символов набору числовых значений. Нужна для “сливания” информации в интернет, т.е. текстовая информация преобразуется в биты данных;
- Кодовая страница (“ Codepage ”) – 1 байтовая ( 8 бит) кодировка;
- Количество значений, принимаемое 1 байтом – 256 (два в восьмой).
Соответствие “символ-изображение” задается с помощью специальных кодовых таблиц, где каждому символу уже присвоен свой конкретный числовой код. Таких таблиц существует достаточно много, и в разных таблицах один и тот же символ может идентифицироваться по-разному (ему могут соответствовать разные числовые коды).
Все кодировки различаются количеством байт и набором специальных знаков, в которые преобразуется каждый символ исходного текста.
Примечание:
Декодирование – операция, в результате которой происходит преобразование кода символа в изображение. В результате этой операции информация выводится на экран монитора пользователя.
В общем.. С определениями разобрались, а теперь давайте узнаем, какие же (кодировки) бывают.
Виды кодировок текста
А их, в общем-то, хватает.
Одной из самых “древних” считается американская кодировочная таблица ( ASCII , читается как “аски”), принятая национальным институтом стандартов. Для кодировки она использовала 7 битов, в первых 128 значениях размещался английский алфавит (в нижнем и верхнем регистрах), а также знаки, цифры и символы. Она больше подходила для англоязычных пользователей и не была универсальной.
Отечественный вариант кодировки, для которого стали использовать вторую часть кодовой таблицы – символы с 129 по 256 . Заточена под русскоязычную аудиторию.
- Кодировки семейства MS Windows : Windows 1250-1258 .
Универсальный стандарт кодирования символов, позволяющий описать знаки практически всех письменных языков. Обозначение “ U+xxxx ” (хххх – 16-ричные цифры). Самые распространенные семейства кодировок UTF (Unicode Transformation Format) : UTF-8, 16, 32 .
В настоящее время, как говорится, “рулит” UTF-8 – именно она обеспечивают наилучшую совместимость со старыми ОС , которые использовали 8 -битные символы. В UTF-8 кодировке находятся большинство сайтов в сети Интернет и именно этот стандарт является универсальным (поддержка кириллицы и латиницы).
Разумеется, я привел не все виды кодировок, а только наиболее ходовые. Если же Вы хотите для общего развития знать их все, то полный список можно отыскать в самом браузере. Для этого достаточно пройти в нем на вкладку “ Вид-Кодировка-Выбрать список ” и ознакомиться со всевозможными их вариантами (см. изображение).
Думаю возник резонный вопрос: “ Какого лешего столько кодировок? ”. Их изобилие и причины возникновения можно сравнить с таким явлением, как кроссбраузерность/кроссплатформенность. Это когда один и тот же сайт сайт отображается по-разному в различных интернет-обозревателях и на различных гаджет-устройствах. Кстати у сайта " Заметки Сис.Админа " с этим, как Вы заметили всё в порядке :).
Ну вот, собственно, пока вся "базово необходимая" теория, которая позволит Вам “не плавать” в кодировочных вопросах, теперь переходим к практической части статьи.
Решаем проблемы с кодировкой или как убрать кракозябры?
Итак, наша статья была бы неполной, если бы мы не затронули пользовательско-бытовые вопросы. Давайте их и рассмотрим и начнем с того, как (с помощью чего) можно посмотреть кодировку?
В любой операционной системе имеется таблица символов, ее не нужно докачивать, устанавливать – это данность свыше, которая располагается по адресу: “Пуск-программы-стандартные-служебные-таблица символов”. Это таблица векторных форм всех установленных в Вашей операционной системе шрифтов.
Выбрав “дополнительные параметры” (набор Unicode ) и соответствующий тип начертания шрифта, Вы увидите полный набор символов, в него входящих. Кликнув по любому символу, Вы увидите его код в формате UTF-16 , состоящий из 4 -х шестнадцатеричных цифр (см. изображение).
Теперь пара слов о том, как убрать кракозябры. Они могут возникать в двух случаях:
- Со стороны пользователя - при чтении информации в интернет (например, при заходе на сайт);
- Или, как говорилось чуть выше, со стороны веб-мастера (например, при создании/редактировании текстовых файлов с поддержкой синтаксиса языков программирования в программе Notepad ++ или из-за указания неправильной кодировки в коде сайта).
Рассмотрим оба варианта.
Также проверьте во всех вкладках, чтобы локализация была “ Россия/русский ” – это так называемая системная локаль.
Если Вы открыли сайт и вдруг поняли, что почитать информацию Вам не дают иероглифы, тогда стоит поменять кодировку средствами браузера (“ Вид - Кодировка ”). На какую? Тут все зависит от вида этих кракозябр. Ориентируйтесь на следующую шпаргалку (см. изображение).
Чтобы такого не происходило, заходим в редактор Notepad++ и выбираем в меню пункт “ Кодировки ”. Именно он поможет преобразовать имеющийся документ. Спрашивается, какой? Чаще всего (если сайт на WordPress или Joomla ), то “ Преобразовать в UTF-8 без BOM ” (см. изображение).
Сделав такое преобразование, Вы увидите изменения в строке статуса программы.
Также во избежание кракозябр необходимо принудительно прописать информацию о кодировке в шапке сайта. Тем самым Вы укажите браузеру на то, что сайт стоит считывать именно в прописанной кодировке. Начинающему веб-мастеру необходимо понимать, что чехарда с кодировкой чаще всего возникает из-за несоответствия настроек сервера настройкам сайта, т.е. на сервере в базе данных прописана одна кодировка, а сайт отдает страницы в браузер в совершенной другой.
Для этого необходимо прописать “внаглую” (в шапку сайта, т.е, как частенько, в файл header.php ) между тегами < head> < /head> следующую строчку:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Прописав такую строчку, Вы заставите браузер правильно интерпретировать кодировку, и иероглифы пропадут.
Также может потребоваться корректировка вывода данных из БД (MySQL). Делается сие так:
mysql_query('SET NAMES utf8' );
myqsl_query('SET CHARACTER SET utf8' );
mysql_query('SET COLLATION_CONNECTION="utf8_general_ci'" ');
Как вариант, можно еще сделать ход конём и прописать в файл .htaccess такие вот строчки:
Все вышеприведенные методы (или некоторые из них), скорее всего, помогут Вам и Вашим будущим посетителям избавиться от ненавистных иероглифов и проблем с кодировкой. К сожалению, более подробно мы здесь инструкцию по веб-мастерским штукам рассматривать не будем, думаю, что они обязательно разберутся в подробностях при желании (как-никак у нас несколько другая тематика сайта).
Ну, вот и практическая часть статьи закончена, осталось подвести небольшие итоги.
Послесловие
Сегодня мы познакомились с таким понятием, как кодировка текста. Уверен, теперь при возникновении каракулей на мониторе компьютера Вы не спасуете, а вспомните все приведенные здесь методы и решите вопрос в свою пользу!
На сим все, спасибо за внимание и до новых встреч.
P.S. Комментарии, как и всегда, ждут Ваших горячих дискуссий и вопросов, так что отписываем.
P.P.S : За существование данной статьи спасибо члену команды 25 КАДР
Ни один из моих браузеров (Firefox, Chrome, IE) не отображает символы для смайликов Unicode 7 , 8 , 9 (или 10 ):
Они часто отправляются мне людьми по телефонам. Поддерживаются символы Unicode 6, но их трудно читать / различать:
Как добавить поддержку этих символов в систему Windows 7? Есть ли способ отобразить их так, как это делает Android, чтобы их было легче читать?
- Юникод 6.1: 😀😗😙😑😮😯😴😛😕😟
- Юникод 7.0: 🙂🙁🕵🗣🕴🖕🖖🖐
- Юникод 8.0: 🤗🤓🤔🙄🤐🙃🤑🤒🤕🤖
- Юникод 9.0: 🤣🤠🤡🤥🤤🤢🤧🤴🤶🤵🤷
- Юникод 10.0: 🤩🤨🤯🤪🤬🤮🤫🤭🧐🧒
Я нашел шрифт Emoji One , который поддерживает все смайлики вплоть до текущей версии Unicode, включая цветовые смайлики (встраивая SVG или что-то в этом роде).
Если шрифт указан, Firefox прекрасно поддерживает цветные эмодзи:
и Chrome и IE поддерживают его монохромные резервы:
но просто установить EmojiOneColor-SVGinOT.ttf шрифт в Windows недостаточно, чтобы избавиться от ящиков, по- видимому, потому что другие шрифты предпочтительнее ?
Частичные обходные пути:
Установка расширения Emoji Keyboard (2016) и включение «Автозамены» в настройках (по умолчанию включено):
производит цветные эмодзи в Chrome вплоть до Unicode 9. (Поддерживаемая версия Unicode указана на странице релизов eosrei / emojione-color-font ):
Автозамена работает на каждом сайте, но не в редактируемых текстовых полях.
Fire Fox
Firefox отображает символы с Arial независимо от того, что вы установили, что вы можете увидеть, установив расширение FontFinder .
Изменение шрифта браузера по умолчанию на Emoji One, кажется, работает в большинстве случаев, но может иметь побочные эффекты. (Например, это также заменяет знак ™, чего не делает расширение Chrome.)
Расширение Emoji Everywhere работает, но, похоже, замедляет загрузку страницы по сравнению со шрифтом и поддерживает только Unicode 6.1.
Вам нужно будет установить шрифт Emoji в качестве резервного шрифта. Таким образом, это используется, если все остальное терпит неудачу. Я не знаю, как и если вы можете сделать это в Microsoft Windows. Теперь есть установщик Windows для шрифта EmojiOne Color v1.3 +, который объединяется с существующими шрифтами, так что все символы работают. Это делает символы от Unicode 9.0 просто отлично, но есть ли способ также отображать предложенные символы Unicode 10.0? Например: 🥟🥡🥢🥠🤨🗹 На случай, если кто-то из недоумков запутается, например, я - смайлики в ответе выше - все изображения: S Похоже, родные смайлики были добавлены в Firefox 50?Спасибо, Эндолит, я искал эту информацию. Вы действительно создали хорошее резюме по проблеме с Windows / Firefox и Unicode Emojis в версиях выше 6.0. 👍
Я также искал возможность обновить Firefox на Windows 7, чтобы показать более новые Emojis.
Хотя вы тестировали расширение Font Finder и обнаружили, что FF использует шрифт Arial для отображения Emojis, сайт GitHub утверждает, что Windows 7, 8 и 10 используют пользовательский интерфейс Segoe для Emojis.
Они только модифицируют Segoe UI Symbol и Segoe UI Emoji с помощью своего нового скрипта, чтобы установить эмодзи Unicode V9, а не шрифт Arial.
В Windows 7, 8, 10 используются эмодзи от Segoe UI Symbol и Segoe UI Emoji. Нам нужно заменить оба шрифта, но оставить существующие символы символов в Segoe UI Symbol.
Сейчас я протестирую их скрипт, хотя для его работы требуется дополнительное программное обеспечение.
Этот пакет содержит скрипт установки, который сгенерирует оба шрифта (или в Windows 7, просто Segoe UI Symbol) и установит их для вас. Для запуска скрипта установки в PATH требуется и Python, и pip.
Почему этот символ Юникода или другие подобные ему не отображаются в Google Chrome на Windows 7?
Для меня это выглядит как коробка . В любом случае, двойная публикация осуждается. @soandos о каком другом посте ты говоришь? Кроме того, это не должно быть коробкой. вот почему я задаю вопрос. Кто-то задал вопрос о askdifferent и набрал там символ юникода, но на моей установке Chrome я вижу стандартную рамку. Как и я . Похоже, это не проблема с вашей установкой Chrome, это для всех цветов. ФФ признает это нормально. Chrome даже не может распознать его как символ Unicode (я не думаю). Интересно, что Chromium в Ubuntu прекрасно работает. @soandos У меня отлично работает с Google Chrome (12.0.742.112) на Ubuntu 11.04 (Natty).Я предполагаю, что это проблема замены шрифта.
Браузеры сталкиваются с проблемой «Выбранный глиф не в указанном шрифте». Отсюда вы можете пойти в двух направлениях: вы можете либо извлечь эквивалентный глиф из другого шрифта (который часто будет выглядеть испорченным, но пользователю может быть непонятно, почему ), либо просто отобразить заполнитель, не найденный символом (который всегда будет выглядеть разбитым, но, по крайней мере, очевидно, что так).
Я полагаю, что Firefox и Opera распознают, что запрашиваемый глиф является символом, который безопасно извлечь из другого шрифта, в то время как остальные браузеры консервативны и просто показывают глиф "Uh . dunno".
Я считаю, что Chrome и Safari используют Windows GDI для рендеринга текста в Windows. IE9 использует DirectWrite, который в этом случае выглядит так же, как GDI. Интересно: вы получите тот же результат, если вставить его в адресную строку. @xpda ты прав; персонаж работает в адресной строке и теле на Firefox, и не работает ни в одном месте в Chrome. Захватывающий. Звучит правдоподобно: Chrome и Firefox используют Uniscribe для отображения текста в браузере, а Uniscribe просто возвращает код ошибки вызывающему приложению, когда определенный символ не может быть найден в текущем шрифте. Приложение должно решить, должен ли Uniscribe затем использовать резервный шрифт для поиска замены, или он должен просто отобразить глиф блока. Chrome - один из браузеров, который просто говорит: «Как бы то ни было, мне все равно. Коробка в порядке».Интересный. Это не просто Chrome - вы можете спросить, почему ни один из следующих браузеров не может отобразить его в Windows 7:
- Firefox (у)
- IE9 (n)
- Хром (н)
- Опера (у)
- Сафари (н)
Поэтому Firefox и Opera могут отображать этот символ Unicode в Windows 7, но другие браузеры не могут.
@jjn это частичный ответ, который обычно разрешаетсяВопрос, задающий вопрос: «Почему этот символ Unicode [. ] не отображается в Google Chrome в Windows 7?» это
Этот конкретный символ является просто кодовой точкой Unicode, которая является произвольным числом. Существует много кодовых точек Юникода, которые не имеют «официального» символа. Даже если у них есть символ, это не обязательно тот случай, когда ваш шрифт имеет символ для этой кодовой точки. Если вы выберете другой шрифт, у вас может получиться другой символ.
Я посмотрел на CSS для страницы, и он показывает отображение этого символа в Arial (плюс куча других шрифтов, которые не имеют значения). Windows поставляется с Arial, поэтому он всегда должен сначала выбрать этот шрифт. Похоже, Arial не есть символ для этого юникода элемента кода. Каждый раз, когда у вас нет глифа для кодовой точки, он вставляет некоторую форму поля, указывающего, что глифа нет (как указали другие).
Главный вопрос в том, что именно делает Firefox или другие браузеры там, где он работает в Windows. Я посмотрел на другие шрифты, перечисленные в CSS (я думал, что это может быть откат к следующему шрифту CSS), но у них также нет глифа для этой кодовой точки. Возможно, Firefox поставляется со своими собственными шрифтами.
Копаясь в firefox, я заметил некоторые шрифты для математических символов: C: \ Program Files (x86) \ Mozilla Firefox \ res \ fonts. Возможно, это то, откуда это исходит.
Я знаю, что это немного старый вопрос, но для тех, кто только что занялся этим, у меня есть решение, которое сработало в 2013 году. Во-первых, вы должны подтвердить, что на вашем ПК с Windows 7 установлен шрифт, который может отображать шрифт:
Предполагая, что по крайней мере один шрифт в списке локальных шрифтов отображает это:
Если нет, то установите пару «поймать все» шрифты Unicode: Code2000 и Symbola
Если у вас есть шрифт, который будет отображать символ, вы можете попробовать тестовую страницу браузера:
Chrome 28.0.1500.95 (и, вероятно, все последние выпуски) выполняет замену шрифтов . в основном.
По любой причине, даже если шрифты правильно отображают U + 1F3C1 , Chrome 28.0 не будет отображать этот символ Unicode: 🏁. Firefox работает прекрасно. Пойди разберись.
Согласно Абсолютному минимуму, каждый разработчик программного обеспечения должен абсолютно точно знать о юникоде и наборах символов (без извинений!) Джоэла Спольски : «Если нет эквивалента для кодовой точки Юникода, которую вы пытаетесь представить в кодировке, которую вы пытаетесь чтобы представить это, вы обычно получаете небольшой вопросительный знак: «или, если вы действительно хороший, коробка ».
Я запускаю Chromium 13.0.782.112 на Archlinux, и моя кодировка по умолчанию - en_US.UTF-8 - символ отлично отображается на первоначально связанной странице.
это нормально, но я не думаю, что вопрос был о коробке, но почему некоторые браузеры могут отображать этот конкретный символ, а другие нет. @Джефф Этвуд, согласился - во всяком случае, мой ответ предоставляет более убедительные доказательства типографского вопроса; читать здесь . Я не могу сказать вам шрифт по умолчанию, потому что я не перед моей машиной.Фактический ответ: это потому, что в Chrome есть ошибка, которая препятствует отображению шрифтов Unicode в Windows 7 (и выше?).
В браузерах возникает проблема «Выбранный глиф не указан в указанном шрифте». Есть два направления, от которых вы можете перейти отсюда: вы можете вытащить эквивалентный глиф из другого шрифта (который часто будет выглядеть сломанным, но может быть неясно why для пользователя) или просто отобразить символ -не найденный заполнитель (который всегда будет выглядеть сломанным, но, по крайней мере, очевидно).
Я полагаю, что Firefox и Opera признают, что запрашиваемый глиф является символом, который можно безопасно извлечь из другого шрифта, в то время как остальные браузеры консервативны и просто показывают глиф «Uh . dunno».
Интересно. Это не просто Chrome - вы можете спросить, почему any следующих браузеров не может отображать его в Windows 7:
Вопрос: «Почему этот символ Юникода, [. ] не отображается в Google Chrome в Windows 7?» является
Этот конкретный символ является просто кодовым номером unicode, который является произвольным числом. Существует много кодировок unicode, которые не имеют «официального» символа. Даже если у них есть символ, не обязательно, чтобы ваш шрифт имел символ для этого кода. Если вы выберете другой шрифт, вы можете получить другой символ.
Я просмотрел CSS для страницы, и он показывает этот символ, отображаемый в Arial (плюс множество других шрифтов, которые не имеют значения). Windows поставляется с Arial, поэтому он всегда должен сначала подбирать этот шрифт. Похоже, что Arial имеет не символ для этого кодового слова unicode. Каждый раз, когда у вас нет глифа для кодового слова, он помещает в какую-то форму поля, указывающего, что глиф не указан (как указывали другие).
Больший вопрос в том, что именно Firefox или другие браузеры делают там, где он работает в Windows. Я посмотрел на другие шрифты, перечисленные в CSS (я думал, что это может отступить на следующем шрифте CSS), но у них также нет глифа для этого кода. Одна из возможностей заключается в том, что Firefox фактически поставляется со своими собственными шрифтами.
Копаясь в firefox, я заметил некоторые шрифты для математических символов: «C: \ Program Files (x86) \ Mozilla Firefox \ res \ fonts». Возможно, именно это и происходит.
Я знаю, что это немного старый вопрос, но для тех, кто недавно использует Google, у меня есть решение, которое работало в 2013 году. Во-первых, вы должны подтвердить, что у вас есть шрифт, установленный на вашем ПК с Windows 7 который может отображать шрифт:
Предполагая, что хотя бы один шрифт в локальном списке шрифтов делает это:
Если нет, тогда установите пару «улавливать все» юникодные шрифты: Code2000 и Symbola
Как только у вас появится шрифт, который отобразит символ, вы можете попробовать страницу проверки браузера:
Chrome 28.0.1500.95 (и, возможно, все последние выпуски) выполняет замену шрифта . в основном.
По какой-либо причине даже с шрифтами, которые отображают U + 1F3C1 , Chrome 28.0 не отображает этот символ Юникода:
По Абсолютный минимум Каждый разработчик программного обеспечения Абсолютно, положительно должен знать о юникодном и символьном наборах ( No Excuses!) От Joel Spolsky : «Если нет эквивалента для кода кода Unicode, который вы пытаетесь представить в кодировке, которую вы пытаетесь представить, вы обычно получаете небольшой знак вопроса:? Или , если вы действительно хороши, box . "
Im запускает Chromium 13.0.782.112 на Archlinux, и моя кодировка по умолчанию - en_US.UTF-8 - charcter отображает на начальной странице ссылку.
Фактический ответ: Это потому, что в Chrome есть ошибка, которая создает рендеринг шрифтов Unicode Windows 7 (и выше?).
Firefox 45.0 на моем GNU /Linux LFS 7.9 не отображал упоминаемый в Unicode глиф, также не отображал других глифов, таких как греческий и т. д.
Однако после загрузки Symbola шрифта из здесь , а затем:
Теперь Firefox показывает отображаемый глиф, а также отображает другие глифы.
Читайте также: