РЕГИСТРАЦИЯ
Гость
Вход не выполнен.

Серьёзно, не используйте иконочные шрифты

Только интересные статьи
6
1825
Кто: modos189, Когда: , Куда: CSS
Вашему вниманию предоставляется перевод статьи Тайлера Стика о необходимости перестать использовать иконочные шрифты. Последний день уходящего года - разве не лучшее время, чтобы навсегда забыть эту технологию как страшный сон? Иконки везде. Эти “маленькие чудотворцы” (как их назвал Джон Хайкс) помогают нам увеличить интуитивность интерфейсов, которые мы проектируем и разрабатываем. Их популярность в веб-дизайне никогда не была выше, в частности, лаконичность и универсальность пиктограмм сделали их прекрасно подходящими для больших и маленьких дисплеев. Но раньше иконки в интернете имели ряд недостатков. Они требовали много времени для подготовки к каждому размеру экрана и цвету. Когда на рынке появились дисплеи высокого разрешения, иконки выглядели очень грубо по сравнению с текстом, который они сопровождали. Таким образом, не удивительно, что иконочные шрифты обрели такую популярность. Иконки, отображаемые через @font-face, были подходящими под любые разрешения экрана и настраиваемыми всеми способами, которые мы ожидали от текста. Конечно, доставка иконок в шрифте было хаком, но это также было полезно, универсально, и даже немного весело. Но теперь нам необходимо остановиться. Пора отправить иконочные шрифты на Небеса Хаков, где они смогут порезвиться с основанной на таблицах версткой, “пуленепробиваемыми закруглёнными углами” и Scalable Inman Flash Replacement. Экранные читалки читают эту дрянь Большинство вспомогательных инструментов будут вслух зачитывать текст, вставленный с помощью CSS, и многие символы иконочных шрифтов - не исключение. В лучшем случае, ваш значок “избранное” будет произнесён как “чёрная любимая звезда”. В худшем, будет прочитано как “непроизносимо”, либо вовсе пропущено. Они ночной кошмар, если ты дислексик Многие люди с дислексией находят полезным замену шрифта сайта на нечто вроде OpenDyslexic. Но иконочные шрифты тоже заменяются, что ломает удобность сайта. Они конфликтуют с Emoji Большую часть времени мы полагаемся на автоматизированные системы, чтобы выбрать, какому юникод символу какой значек будет присвоен. Но в юникоде также живут Emoji. Если вы не будете осторожны, они могут перекрываться, хотя и иногда весёлыми способами. Мой любимый пример - баг “четыре звезды и лошадь”. Совсем недавно на другом сайте были замечены иконки кулаков. Они часто ломаются Когда не удаётся загрузить иконочный шрифт, браузер обрабатывает его как любой другой шрифт и заменяет на запасной. В лучшем случае, если вы тщательно выбирали символ, он заменится на нечто странное, но всё же передающее смысл. В худшем случае (и гораздо чаще), пользователь увидит что-то совершенно неуместное, обычно страшный “отсутствует символ”. Пользовательские шрифты не должны содержать критически важных компонентов. Они постоянно ломаются. Только взгляните на вопросы, связанные с иконками в Bootstrap и становится не удивительно, что иконочные шрифты будут удалены в следующем релизе. Хуже того, многие пользователи так никогда и не увидят эти шрифты. Opera Mini, с сотнями миллионов пользователей по всему миру, которая конкурирует с iOS Safari в глобальной статистике, вовсе не поддерживает @font-face. Они никогда не выглядят правильно Использование шрифтов для улучшения восприятия никогда не было подходящим вариантом для пользовательской иконографии. Ситуация с многоцветными иконками ещё хуже. Техника наложения нескольких компонентов звучит интересно, но на практике выглядит, словно смещены цвета при печати. Вы, вероятно, делаете это неправильно “Но автор,” – я уже слышу от вас – “вы совершенно проигнорировали пуленепробиваемые иконочные шрифты от Filament Group`s, поддерживающие резервные варианты для отображения иконок”. И вы правы. Эти технологии великолепны! Если вы используете иконочные шрифты, вы должны придерживаться рекомендаций статьи. Но вы, вероятно, не будете это делать. Вероятно вы используете встроенные возможности вашего любимого фреймворка, либо применяете в качестве запасного какой-нибудь бесплатный иконочный шрифт. Вы не модифицируете то, что можно видеть “из коробки”, потому что действительно трудно расставить приоритеты, особенно, когда иконки и так прекрасно выглядят на мониторе, не требуя от вас ни каких усилий. Или, может быть, вы будете проектировать и поддерживать пользовательский иконочный шрифт, тщательно выбирая символы юникода, документируя и рекомендуя использовать ваши иконки. Потом, в один прекрасный день, Ваня забывает добавить резервную копию для иконки кнопки, которую он добавил (которая, кстати, смотрится прекрасно), которую затем использует Дима в Pull Request, и прежде чем вы об этом узнаете, ваше приложение станет наполнено разного рода хаками и проблемами при отображении. Эти примеры не гипотетические (хотя имена изменены, чтобы защитить невиновных). Я видел в нескольких организациях, как подобное происходит, начинаясь с наилучших намерений. Там всё лучше SVG прекрасно подходит для иконок! Это формат векторных изображений с дополнительной возможностью поддержки CSS, JavaScript, многократного использования, доступности и многого другого. Он был создан для подобных вещей. Но я слышал множество оправданий, почему команды разработчиков не используют его даже для новых проектов. Вот некоторые из них… “SVG не могут быть объединены в спрайты” Очень даже могут. Более того, существуют специальные инструменты, такие как svg-sprite или IcoMoon, которые могут автоматизировать этот процесс. “SVG файлы много весят” Обычно, когда я это слышу, команды сравнивают один бинарный иконочный шрифт с несколькими отдельными не сжатыми SVG файлами.Разрыв резко уменьшается, если вы оптимизируете ваши SVG файлы, объединяете в спрайты и активируете Gzip сжатие, либо внедряете в страницу. Изредка я слышу, что разрыв всё равно становится большим, если подключены сотни иконок. Напрашивается вопрос: Зачем вы внедряете сотни иконок на каждой странице? “Разметка иконок требует много кода“ Давайте сравним:
<!-- Typical @font-face icon: -->
<span class="icon icon-search" aria-hidden="true"></span> 

<!-- Typical SVG icon: -->
<svg class="icon">
<use xlink:href="path/to/icons.svg#search"></use>
</svg>
Разметка SVG иконки немногим сложнее, однако взамен это понятнее и семантически правильнее, в отличии от какого-то пустого элемента с параметром aria-hidden. “Браузерная поддержка SVG хуже, чем у шрифтов” На момент написания статьи, поддержка SVG в мире превышает 96%... На 4% выше, чем аналогичная статистика распространения @font-face. К тому же, SVG более доступен и прямолинеен при ошибках. “В фреймворке, который мы выбрали, уже используется иконочный шрифт” А если фреймворк спрыгнет с крыши, вы тоже следом? Не будьте “табличным парнем” Я был в школе, когда веб-стандарты только получали распространение. В то время, когда большинство моих преподавателей ратовали за семантическую вёрстку, один из них не отказывался от табличной верстки. “Табличный парень” утверждал, что ни один инструмент не сравнится с версткой макетов с использованием , что таблицы по своей сути лучше всего подходят для основанных на сетке дизайнов. Он хвастался, как он может легко и просто достичь “Святого Грааля” с использованием его любимых таблиц. В качестве одного из аргументов в свою пользу он приводил разнообразие кроссбраузерных несоответствий, что является проблемой и современного CSS. Я поддерживаю связь с этим табличным парнем. Сегодня он свободно признаёт, что ошибался в CSS. Он чувствует себя неловко из-за того, что видел будущее в устаревших технологиях. Если вы не хотите перестать использовать иконочные шрифты ради людей с читалками экрана, людей с дислексией, людей с отсутствием поддержки @font-face в браузере, людей, у которых по какой-то причине не загрузился один из иконочных шрифтов, или дизайнеров, которые просто хотят видеть иконки на экране… Тогда сделайте это для себя. Не будьте табличным парнем. Оригинал статьи в блоге автора: http://blog.cloudfour.com/seriously-dont-use-icon-... Копия этой статьи в нашем блоге на спарке: https://spark.ru/startup/atom-m-cms/blog/...
Прикрепленные файлы:
У вас нет прав для скачивания прикрепленных файлов
Комментарии:
  • User avatar

    MAX555

    Предлагаю PNG24 нужного размера. 

    Дата отправления:
  • User avatar

    modos189

    Ну серьёзно? Рисовать кучу разных картинок для всех разрешений экрана? К тому же, даже одна подобная картинка весит гораздо больше векторной

    Дата отправления:
  • User avatar

    Destroy

    спрайты?

    Дата отправления:
  • User avatar

    MAX555

    Да? В таком случае SVG. 

    Дата отправления:
  • User avatar

    Destroy

    Помойму глупо писать про это на сайте где юзается шрифтовые иконки.

    Дата отправления:
  • User avatar

    modos189

    Нет ничего идеального

    Дата отправления: