Unicode для мира, Multi-Device | bot.kz

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

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

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

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

Что делать,

Я мог бы использовать лигатуры для @font-face значка.Они прекрасно подходят для доступности, но не поддерживаются в Internet Explorer 9 или выше .
Я мог бы использовать по умолчанию “пустые” символы Unicode ( PUA ranges ¹), какие приложения, такие как IcoMoon умолчанию в.Но, опять же, Internet Explorer имеет issues ², и если пользователь установил шрифт по умолчанию (если они есть дислексией, например), то они не увидят ничего значимого .
Есть некоторые веские аргументы в пользу использования SVG ³, но мне нравится гибкость @font-face: Изменение цвета при наведении очень легко, например, и @font-face Иконкивизуализации с субпиксельной сглаживания, в то время как SVG использует оттенки серого .

Я был счастлив с основными персонажами Unicode, потому что они дали хороший запасной вариант для пользователей на Windows Phone 7, Opera Mini и старые BlackBerrys, которые не поддерживают @font-face.Вместо этого, я хотел определить, какие Unicode символов я мог спокойно использовать .

Итак, я начал делать некоторые испытания.И это привело к еще какое-то испытания, и после некоторых более .

Пока я смотрел на 107 символов Unicode на 78 устройств и 5 чтения с экрана.Я буду честен — это не самое веселое я когда-либо имел.Итак, я спасу вас от неприятностей и поделиться некоторыми из проблем и потенциальных решений, которые я столкнулся .

Зачем беспокоиться

Но прежде чем мы перейдем к тому, что, давайте просто убедитесь, что это все стоит .

⁴
Слева направо: @font-face значок с помощью лигатуры в Chrome;@font-face значок с помощью лигатуры в Internet Explorer 9 (да-да, ничего там);@font-face значок с помощью запасного Unicode в Opera Mini;@font-face значок с помощью PUA кода точки Opera Mini (да-да, ничего там).( Большая version ⁵)

⁶
Слева: SVG с оттенками серого сглаживания.Справа: @font-face значок с субпиксельной рендеринга.(Как в Firefox).( Большая version ⁷)

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

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

How Do You Do It, Тогда

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

¹⁰
инструменты, как IcoMoon сделать его простым для создания иконок шрифты.( Большая version ¹¹)

Итак, как вы знаете, какой Unicode символ использовать?Вы можете пройти через один из многих ресурсов, которые перечисляют все 110 000 знаков, но вы, вероятно, есть более важные дела, чтобы сделать. Shapecatcher ⁴³ ¹² делает жизнь немного легче: Нарисуйте фигуру вы после этого, и он будет возвращать список похожие символы .

¹³
Shapecatcher вернет выбор похожий, иконки для вас.( Большая version ¹⁴)

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

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

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

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

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

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

¹⁹
Изменение Emoji символов.Слева направо: Firefox (Windows 7), Chrome (Windows 7), Chrome (Android 4.2.1), Opera (Windows 7) и Safari (IOS).( Большая version ²⁰)

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

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

²¹
Unicode символ 260E показано на Firefox, Chrome, Internet Explorer и Opera на той же Windows 7 машине, так и на IOS.( Большая version ²²)

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

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

Accessibility

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

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

Лучший подход зависит от того, что икона для.Если оно лишь добавляет визуальный процветать в текстовой метки или заголовка, то я рекомендовал бы скрывая значок чтения с экрана.В этом случае, вместо добавления иконок шрифты непосредственно к элементу стандартным образом (т.е. с помощью :before или :after 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 Unicode MS, в семейство шрифтов стек, который используется для отображения символов Unicode, но это не гарантирует, что появится символ для всех.Если браузер не может найти шрифт с требуемым характером Unicode из тех, кого вы перечислили в font-family декларации, то он будет пытаться найти какой-либо шрифт в операционной системе, которая будет отображать его .

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

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

Главная → Программирование → 06.05.2014 by coding.smashingmagazine.com