Я использую значки материалов дизайна от Google в своем приложении. На данный момент нужны как минимум два стиля: обычные (заполненные) иконки и выделенные. Проблема в том, что эти два стиля не совпадают!
Если вы посмотрите на этот вывод, обычные и выделенные значки расположены на разной высоте без четкой причины. Изучив их в инспекторе, вы можете увидеть, что ограничивающие рамки действительно разные (для выделенных значков они кажутся ниже, чем нужно).
Есть ли обходной путь, который можно применить к классу .material-icons-outlined один раз, чтобы обеспечить их правильное позиционирование везде?
margin-bottom: -1em работает для базовых случаев, но значки используются во многих различных контекстах, и иногда (например, когда их родителям необходимо уменьшить свою высоту строки) это решение не удается.
В качестве альтернативы, есть ли инструмент, который может быстро исправить шрифт и заставить его символы появляться на нужной высоте?
ОБНОВЛЕНИЕ : Кажется, это проблема только на моем Windows 8.1. Значки выровнены в Windows 10. Это воспроизводится в любом браузере.
ОБНОВЛЕНИЕ (2) : Тем не менее, между этими двумя шрифтами есть определенная разница. Выделенные значки не работают (просто отображают их имена вместо значков) в старых версиях iOS, в то время как обычные работают отлично.