Поддержка Unicode браузером
Я использую Кнопки CSS с иконками, но без изображений. Значки создаются с использованием значений юникода.
В этом я столкнулись с проблемой, что некоторые браузеры не поддерживают некоторые значения unicode. Поэтому вместо правильной иконки отображается какой-то нежелательный символ.
Чтобы обеспечить поддержку Unicode в любом браузере, какие шаги мы должны выполнить?
Ответы
Ответ 1
Это прежде всего проблема с шрифтом, но если шрифты, перечисленные в вашем CSS, не покрывают какой-либо символ, тогда разные браузеры будут использовать резервные шрифты по-разному. Исправление состоит в том, чтобы попытаться найти список шрифтов, который, вероятно, охватывает все используемые вами символы. Трудность этого очень зависит от персонажей, которые вы используете. Использование недавно введенных символов в кнопках в основном бессмысленно, потому что изображения работают более надежно. Использование символов в тексте - другая проблема. Подробнее см. В Руководство по использованию специальных символов в HTML.
Ответ 2
Все браузеры, поддерживающие Unicode, поддерживают все коды символов, но не все шрифты имеют символьные глифы для всех символов Юникода.
Итак, чтобы получить поддержку символов, которые вы хотите, вам нужно будет загрузить шрифт, который имеет эти символы, в форматах, используемых всеми различными операционными системами.
Ответ 3
Вы можете создавать свои собственные шрифты с помощью инструментов, таких как Icomoon App.
Приложение Icomoon позволяет выполнять следующие действия:
- Получить один или несколько значков из нескольких популярных шрифтов значков
- Загрузите другие шрифты, которые могут быть значками шрифтов, а также обычные шрифты
- Объединить любое количество значков из любого количества доступных шрифтов
- Установите шестнадцатеричное значение UNICODE для любых символов, которые вам нужны.
- Экспорт и/или сохранение созданного вами шрифта
Я использовал приложение Icomoon для создания
Если вы хотите выбрать метод 7, вам понадобится дополнительный CSS-код. Этот CSS-код будет выглядеть так:
.icon-star:before {
content: "\2605";
}
.icon-star-unfilled:before {
content: "\2606";
}
Значки шрифтов типа , или обычно используют все метод 7. Это, чтобы избежать необходимости копировать специальные символы из листа читов или принудительно использовать объекты HTML.
Это, однако, метод, который имеет несколько недостатков. Прежде всего, для этого требуется поддержка селектора CSS :before
и использование escape-последовательности для символов UNICODE. Эта поддержка не поддерживается ни IE6-7, ни .
Другой недостаток заключается в том, что для каждого значка необходимо использовать отдельный тег HTML, причем каждый тег соответствует одному символу из шрифта значка. Отображение нескольких значков в теге HTML невозможно с помощью метода 7, в отличие от других методов.
Другие методы имеют свои собственные недостатки. Способы 1, 3 и 5 требуют, чтобы вы скопировали символ из обложки или использовали средства, чтобы поместить символ в свой код. Редактор вашего кода может не отображать символ, иначе он может отображать другой символ из символа в шрифте значка, если шрифт значка использует нестандартное сопоставление этого символа.
Способы 2, 4 и 6 не требуют, чтобы вы копировали-вставляете символ, однако это делает ваш код менее удобочитаемым человеком и вносит какие-либо изменения в код, более подверженный человеческой ошибке. Кроме того, поскольку вам нужно будет искать код HTML-сущности для каждого из значков, которые вы хотите использовать, или вам нужно запомнить их. Хотя то же самое относится и к классам, используемым в методе 7, эти классы гораздо легче запоминать, чем код объекта HTML.