Поддержка лигатурных иконок браузерами

#css #веб_программирование #svg #шрифты #кроссбраузерность

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

Меня интересует кроссбраузерность этого подхода.



.material-icons.material-icons {
  font-size: 10rem;
}

home



    

Ответы

Ответ 1

Короткий ответ:   


Сделано это с помощью подключения символьного шрифта от Google

Краткая аннотация от Google:
Шрифт обеспечивает читаемость и четкость символов, как больших, так и малых размеров.
Эти иконки оптимизированы для красивого отображения на всех распространенных платформах
и разрешениях дисплея.
Поддерживается всеми современными браузерами. Поддержка IE,
начинается с IE10.    


Таблица поддержки символьных шрифтов браузерами. 

Более подробно:

Всё началось в 2012 году.   

Разработчики github.com решили повысить производительность своего сервиса и заменить
множество различных иконочных шрифтов одним своим стандартным Octicons, который  отвечал
бы всем их потребностям в отображении иконок.
Скачать шрифт можно здесь       

В марте 2013 года портал alistapart выпускает свою аналитическую статью -
 The Era of Symbol Fonts       

В которой автор рассказывает о преимуществах и некоторых недостатка применения символьных
шрифтов.
Автор статьи пишет, что шрифт, как векторное изображение поддерживается всеми браузерами
вплоть до IE6.       

Я перевел заключительную часть статьи, заранее извиняюсь за вольный перевод    

Проблемы с шрифтами   

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

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

Это тоже проблематично, потому что вы не представляете, как конечный пользователь
действительно просмотрит ваш дизайн.  Увеличение размера шрифта в их браузере изначально
не приведет к изменению дизайна символа.   

Для большинства из нас это не проблема, так как многие иконки, которые мы используем
сегодня для фидов и социальных сетей, относительно хорошо знакомы нам.    

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

Чтобы исправить это, Apple предлагает многоцветные шрифты, которые позволят вам создавать
и вставлять чистую векторную графику на любую веб-страницу. 

Первой попыткой в этой области является шрифт Apple Color Emoji, который вы, возможно,
уже имеете, если на вашем компьютере работает OSX Lion       

       

Google Material Icons     

Google воплотил  идеи символьного шрифта в реальность и создал свой символьный шрифт
svg иконок, который включает в себя 900 изображений.     

Подключение шрифта: 

         


Выбирать иконки по названиям можно здесь  (см. Update)    

Пример использования гугловского символьного шрифта:      

Наведите курсор на иконки



i {
  margin: 100px 50px 50px 80px;
  transition: transform 1s ease-in-out;
}
i:hover {
  transform: scale(10);
}

.red{color:red}
.green{color:yellowgreen}
.blue{color: dodgerblue}

settings 
android
stars 




Проверена работоспособность FF, Chrome, Opera, IE11.
К сожалению не имею возможности проверить работоспособность на более старых версиях
IE и Safari

Update 27.01.2018




Для иконок символьного шрифта с названиями в несколько слов, например
note add необходимо отдельные слова соединять нижним подчеркиванием note_add
Также имеется возможность поддерживать IE более старых версий: IE9 и
ниже.
Для этого в таблице шрифтов выберите нужную иконку и нажмите ICON FONT и заберите
образец вставки: 



   

Ниже комбинированный пример для современных браузеров и для старых версий IE   



i {
  margin: 100px 50px 50px 80px;
  transition: transform 1s ease-in-out;
}
i:hover {
  transform: scale(10);
}

.red{color:red;}
.green{color:yellowgreen;}
.blue{color: dodgerblue;}
.grey{color: grey;}


note_add 


offline_pin



speaker_notes




Связанный пример:    

Нарисовать галочку средствами CSS