Как загрузить файл шрифта из CSS-файла в проект Angular

Question

У меня есть этот проект со шрифтами, изображениями и CSS-файлами в папке assets:

Как я могу импортировать шрифты в этот CSS-файл?

@font-face {
    font-family: lg;
    src: url(./assets/fonts/lgd641.eot?n1z373);
    src: url(./assets/fonts/lgd41d.eot?#iefixn1z373) format("embedded-opentype"), url(./assets/fonts/lgd641.woff?n1z373) format("woff"), url(./assets/fonts/lgd641.ttf?n1z373) format("truetype"), url(./assets/fonts/lgd641.svg?n1z373#lg) format("svg");
    font-weight: 400;
    font-style: normal;
}

Теперь я не найден.

Answer 1

Попробуйте изменить путь к следующему:

@font-face {
    font-family: lg;
    src: url(assets/fonts/lgd641.eot?n1z373);
    src: url(assets/fonts/lgd41d.eot?#iefixn1z373) format("embedded-opentype"), url(assets/fonts/lgd641.woff?n1z373) format("woff"), url(assets/fonts/lgd641.ttf?n1z373) format("truetype"), url(assets/fonts/lgd641.svg?n1z373#lg) format("svg");
    font-weight: 400;
    font-style: normal;
}

Надеюсь, это поможет!

Answer 2

Запустите URL-адрес шрифтов с помощью ~.

. Измените @font-face, как показано ниже:

@font-face {
  font-family: lg;
  src: url('~/assets/fonts/lgd641.eot?n1z373');
  src: url('~/assets/fonts/lgd41d.eot?#iefixn1z373') format("embedded-opentype"), 
       url('~/assets/fonts/lgd641.woff?n1z373') format("woff"), 
       url('~/assets/fonts/lgd641.ttf?n1z373') format("truetype"), 
       url('~/assets/fonts/lgd641.svg?n1z373#lg') format("svg");
  font-weight: 400;
  font-style: normal;
}

Answer 3

вы можете использовать ../fonts/file-name путь к каталогу шрифтов вместо ./assets/fonts в файле css.