Как понять, отобразился ли символ на веб-странице?
Всегда используй юникод в вебе, говорили они. Он везде и всегда отображается корректно, говорили они.
Проблема в том, что в некоторых сочетаниях систем-обновлений-браузеров-шрифтов-локалей символ не отображается. Вместо него - квадратик.
И ладно бы это были какие-нибудь иероглифы или эмодзи (которые вообще-то тоже нужны), но в наших реалиях есть проблемы например со знаком рубля (₽), который появился недавно и зависит от обновления системы. И даже если обновление есть - не отображается в FF на моих системах.
Итак, задача. Нужно протестировать, отобразился в браузере конкретный символ или нет.
Ну и дальше от этого строить логику - например, подгружать отдельный шрифт, где искомый символ точно вбит. Или картинку. Или наоборот, заменить картинку на символ, если он может нормально отображаться.
Сейчас я для этого использую жуткий костыль: рисую искомый символ 32 кеглем на canvas'е через context.fillText и проверяю цвет пикселей там, где у искомого символа они по идее должны быть закрашены.
Как правило срабатывает, хоть и не во всех случаях, а ещё нужно писать отдельный тест под каждый шрифт\символ из-за разного расположения пикселей.
При этом меня не оставляет ощущение неправильности происходящего.
Кто-нибудь знает более простой или менее костыльный способ проверки?
Предлагаю создать свой шрифт, в котором будет только один требуемый вам символ (для экономии размера).
Даже разбираться с программами рисования шрифтов не надо - на днях на geektimes статья была geektimes.ru/post/246800
У меня именно так и сделано, но не кажется правильным.
У пользователя в системе может быть уже есть этот знак и хочется использовать его, если есть возможность.
Хорошо, вот мы нарисовали знак рубля из Arial и принудительно его показываем. Не факт что у человека вообще есть Arial в системе, там может быть совсем другой шрифт. И в нем может быть наш знак, который нативно выглядит совершенно иначе. А может и не быть.
Например, мы хотим допустим отображать emoji. Их там десятки, если не сотни. И на разных платформах они нарисованы по разному (если конечно вообще нарисованы). Хочется выводить заменители только в случае, если соответствующего знака в системе точно нет.
Как вариант - грузить пользователю полностью какой-нибудь шрифт, где гарантированно всё есть и выглядит одинаково. Но это тоже ужасно.
Георгий: в современном веб-дизайне использование 2х и более шрифтов на странице, которых обычно у пользователя нет, давно уже норма. Дизайн точится под определеннй шрифт, а не под семейство sans-serif, так что нет ничего страшного в подгрузке лишних десяти килобайт.
Георгий: Не понимаю из каких соображений вы пытаетесь показать что-то пользователю на СВОЕМ сайте пользовательским системным шрифтом по умолчанию? Ваш сайт - ваш дизайн. Вы можете использовать любой шрифт. Нарисуйте свой символ в стиле своего дизайна.
Хотя на хабре видел статьи, где пытаются исправить рендер шрифтов в конкретных браузерах, но это не тот случай.
