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

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

1 голос
/ 08 января 2020

Я привык к значкам 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 не определяет содержимое явно. Почему это явно определено в этой библиотеке, а не в материале?

1 Ответ

1 голос
/ 08 января 2020

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

enter image description here enter image description here

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

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

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

...