Зачем мне нужен контент при использовании некоторых иконочных шрифтов?

Я привык использовать значки Google Material, для этого я обычно включаю их вот так...

// Pug
link(href="https://fonts.googleapis.com/css?family=Material+Icons&display=block", rel="stylesheet")

Внутри такой код...

// css
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(https://fonts.gstatic.com/s/materialicons/v48/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}

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

.ico_thing:before {
  content: "\E000";
}

Обратите внимание, что пакет Google явно не определяет содержимое. Почему это явно определено в этой библиотеке, а не в материале?

JGleason 08.01.2020 источник

comment

чтобы отобразить что-либо с помощью before, вы должны использовать content, прочитайте это stackoverflow.com/questions/9599811/ - noname 08.01.2020

comment

Я понимаю, но почему мне это не нужно с Google - JGleason 08.01.2020

Ответы (1)

arrow_upward
1
arrow_downward

Библиотека Google Material Icons не использует атрибут content в псевдоклассах и фактически не имеет явного CSS для каждой иконки. Вы можете убедиться в этом, просмотрев пример кода в их документации (обратите внимание на выделенный элемент):

Как они объясняют, это благодаря использованию лигатур:

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

Другие библиотеки значков, как вы заметили, используют явные объявления с content, а не лигатуры, в основном для поддержки старых браузеров (таких как IE 9 и ниже). Недостатком являются большие файлы CSS.

Jon Uleis 08.01.2020

comment

Я думаю, это именно то, что я пытаюсь понять, у вас есть больше ссылок об этом? (пропущенная ссылка, но любая информация потрясающая) - JGleason; 08.01.2020

comment

Конечно, вот несколько полезных ссылок: alistapart.com/article/the-era. -of-symbol-fonts - и - css-tricks.com/ligature-icons< /а> - Jon Uleis; 08.01.2020

comment

Как называется строка содержимого (если другая является лигатурой)? \E000 - JGleason; 08.01.2020

comment