Как избежать лигатур внутри option-tag?

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

Поэтому я использую FontAwesome-Fonts для тега select и глифы unicode для различных символов. Первая часть работает хорошо. Но слова, которые я использую, также используются в FonAwesome для формирования лигатур, которые также можно использовать для получения значков (я думал, что это ограничивается desktop, но, как показывает мой пример, это также происходит в Интернете). На сайте FA указано, что им «... неудобно рассматривать лигатуры для веб-шрифтов + CSS».

Пожалуйста, проверьте мою скрипку здесь или скриншот:

введите здесь описание изображения

Итак, мои вопросы:

  • если это не должно происходить с веб-шрифтами / CSS - есть ли что-то, что я делаю неправильно, используя их? (Конечно, на моей машине установлены настольные шрифты, я думаю, мы не узнаем, будут ли они у пользователей веб-сайта или нет)

  • Можно ли как-то избежать действия лигатур внутри тега option? (как вы видите в примере, я уже использую font-variant-ligatures: none; в CSS)


person MBaas    schedule 04.08.2019    source источник
comment
Ваша скрипка на самом деле мало что демонстрирует; у него даже нет значков FA. Можете ли вы сказать нам, какие слова в примере образуют лигатуры?   -  person Mr Lister    schedule 05.08.2019
comment
Я добавил скриншот скрипки (сделанный в последней версии Chrome). Интересно, что он не показывает значки для вас. (Я знаю, что это не работает на IOS, но везде, если нужно)   -  person MBaas    schedule 05.08.2019


Ответы (1)


Я нашел способ решить эту проблему, определив выделенный @font-faces с другим именем. (Моя теория заключается в том, что Chrome использует локальный шрифт, который я установил, и что его лигатуры переопределяют все, что я делаю в CSS). Этот "специальный шрифт" наверняка не будет найден локально...

Если кто-то найдет лучшее объяснение или исправление, я с радостью приму его.

person MBaas    schedule 05.08.2019