Время назад, я работал на веб-сайте, который требует ряд иконок.”Нет проблем”, подумал я.”Я знаю, как с этим справиться.Я буду использовать @font-face набор иконок для экранов с высоким разрешением.Это будет один файл, чтобы уменьшить HTTP запросов, и я буду включать только те значки, которые мне нужно, чтобы уменьшить размер файла «

“Я даже использовать символ Unicode в качестве основы иконы, так что если @font-face не поддерживается, то пользователь будет видеть что-то вроде предполагаемого значок.” Я чувствовал себя довольно доволен собой .

То есть, пока я не столкнулся страницу в лаборатории устройства .

На некоторых устройствах, число икон не показывая.Тем не менее, на тех же устройствах, другие были, так ясно, что она не была @font-face Вопрос.Он должен был основной Unicode .

Что делать,

• Я мог бы использовать лигатуры для @font-face значок.Они прекрасно подходят для доступности, но не поддерживается в Internet Explorer 9 или выше .
• Я мог бы использовать по умолчанию “пустые” символы Unicode ( PUA ranges ^{1 | __19), какие приложения, такие как IcoMoon умолчанию в.Но, опять же, Internet Explorer имеет issues __22 | | 2__15} , и если пользователь установил шрифт по умолчанию (если они дислексией, например), то они не будут видеть ничего значимого .
• Есть некоторые хорошие аргументы для использования SVG __30 | | 3__15 , но мне нравится гибкость @font-face: Изменение цвета при наведении очень легко, например, и @font-face Иконкивизуализации с субпиксельной сглаживания, в то время как SVG использует оттенки серого .

⁴

⁶

(О, и если я слышу ропот “? Opera Mini Никто не использует, что,” то считайте, что есть 70 млн больше, Opera Mini пользователей, чем iPads ⁸ . В мире)

По-моему, используя лежащий в основе характер Unicode кажется наиболее жесткий подход, предлагая визуальную икону наибольшим числом устройств и браузеров .

Как вы это сделать, то

Если вы не использовали символы Unicode с @font-face икон, не волнуйтесь.Такие инструменты, как IcoMoon __44 | 9 сделать его простым.Когда вы выбрали значки, которые вы хотите использовать, и нажал генерировать шрифт, вы увидите страницу, которая показывает все выбранные вами значки с их именем и код точки Unicode, что они будут отображаться на.Это, как правило, что-то вроде e600, и это число, что вам нужно, чтобы заменить шестнадцатеричное значение выбранного вами персонажа Unicode .

¹⁰

Итак, как вы знаете, что Unicode символ использовать?Вы можете пройти через один из многих ресурсов, которые перечисляют все символы 110000, но вы, вероятно, есть лучшие вещи, чтобы сделать. Shapecatcher ^{43 12} делает жизнь немного легче: Нарисуйте форму вы после, и он будет возвращать список похожие символы .

¹³

Выберите тот, который вы больше всего нравится, скопируйте шестнадцатеричное значение Unicode, и вставьте его в IcoMoon.После того как вы сделали это для всех ваших иконок, скачать @font-face пакет как обычный .

Итак, какие символы вы должны использовать

Ну, я должен буду отложить до ответа Джереми Кейта за все о Сети: “. Это depends ¹⁵ ” В ходе тестирования, поддержка любого данного символа Unicode меняется чрезвычайно (ипо “поддержке”, я имею в виду, что либо @font-face появляется значок, который появляется или основной Unicode символ, а не пользователя, видя пустую прямоугольник или знак вопроса или вообще ничего).Даже Unicode символов в одном “ block __47 | 16 ” связанных символы часто имеют совершенно разные уровни поддержки .

Но я могу предоставить небольшую помощь.После того, как вы знаете, какой Unicode символ, который вы хотите использовать, запустить его через Unify __55 | 17 , которая даст вам счет поддержки на основе устройств, которые я проверил с тех пор .

Если ты счастлив ни с @font-face значок или символ Unicode отображается, вы должны увидеть очень высокие уровни поддержки.Некоторые иконы работать на все, что я испытывал до сих пор .

Большой Исключением является Emoji characters ¹⁸ ,которые я хотел бы держаться подальше от.Около половины из устройств, которые я проверил на не показывают @font-face значок, и многие не показывать ничего значимого вообще.Кроме того, IOS заменяет их фиксированного размера цветных графики, таким образом пытаясь масштабировать их с font-size не будет работать .

¹⁹

Кроме того, если устройство может оказывать характер Unicode, то, как правило, также быть в состоянии вынести @font-face значок, который использует этот символ.Таким образом, вы должны будете принять решение о компромиссе: Использование шрифта значок дает вам больше контроля над дизайном, но тогда вы бы добавляя к весу страницы и задержки рендеринга иконы до шрифта не загружается .

Если вы используете только символ Unicode напрямую, то будьте готовы к различным визуальных стилей.Даже на том же компьютере, браузеры могут оказать тот же характер, совершенно по-разному .

²¹

Во многих проектах, последовательность и контроль вы получаете от использования @font-face значок стоит.Ввод только иконки, которые вам нужно в файле шрифта позволит свести к минимуму время загрузки .

Сказать что-либо более о @font-face икон бессмысленно, потому что Зак Leatherman написал такие отлично и хорошо проработанный article ²³ .

Accessibility

Зак смотрит в глубину на доступности последствий с помощью значков на этом пути, и я хотел бы добавить несколькомысли .

Есть две основные проблемы здесь: чтения с экрана либо полностью игнорируют значок (который оставил бы пользователь не зная, что там что-то есть, чтобы взаимодействовать с) или объявить что-то, казалось бы, не имеет значения.Например, если вы использовали символ Unicode 2261 для значка “бургер”, это будет либо игнорироваться или будет объявлено как “Equal” или “идентичны”, в зависимости от программы чтения с экрана.Ни один из них поможет пользователю понять, что этот элемент делает .

Лучший подход зависит от того, что икона для.Если оно лишь добавляет визуальный процветать в текстовой метки или заголовка, то я рекомендую скрывая значок чтения с экрана.В этом случае, вместо добавления иконок шрифты непосредственно к элементу стандартным образом (т.е. с помощью :before 33 ~ или | CSS псевдо-элемент), добавить его в промежуток внутри элемента.Таким образом, вы можете добавить aria-hidden="true" размаху, что позволит предотвратить его от объявил в разумное количество экрана readers ²⁴ .

<span aria-hidden="true">≡</span> Menu

Тем не менее, если значок будет использоваться самостоятельно, без ничего еще, чтобы обеспечить значение или контекст, то я рекомендую скрывая значок, как и раньше, но добавив текстовую метку, которая скрыта визуально.Это обеспечит реплику, что есть что-то взаимодействовать с .

<style>
    .visiblyHidden {
    /* http://css-tricks.com/places-its-tempting-to-use-display-none-but-dont/ */
        position: absolute;
        overflow: hidden;
        clip: rect(0 0 0 0);
        height: 1px; width: 1px;
        margin: -1px; padding: 0; border: 0;
    }
</style>

<span aria-hidden="true"> ≡ </span><span class="visiblyHidden">menu</span>

Ли font-family Помощь

Я слышал рекомендацию, что вы должны включать шрифты Arial, как MS Unicode в шрифте семью стек, который используется для отображения символов Unicode, но это не гарантирует, что появится символ для всех.Если браузер не может найти шрифт с требуемым характером Unicode из тех, кого вы перечислили в font-family декларации, то он будет пытаться найти любой шрифт в ОС, которая будет отображать его .

Консистенция трудно найти, хотя, потому что это будет зависеть от шрифтов, доступных на этом конкретном устройстве и в браузере используется.Производители браузеров бесплатно искать все найденные шрифты Однако они считают лучшим — и ради производительности, браузер может остановить поиск, если он слишком долго .

Всеми с …

Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров