Как использовать локальное семейство шрифтов в Angular 8?

Question

У меня есть несколько пользовательских шрифтов в папке /assets/font, скажем, это "ITC Charter Com Black", и я получил четыре вида файлов:.eot.svg.tff.woff,

и как я могу использовать эти шрифты в моем проекте? Я устал:font-family: 'ITC Charter Com Black';

это не работа.

Answer 1

Настройте перед использованием пользовательского шрифта

Шаг 1: в папкеsrc/assets создать новую папку fonts так что новый путь выглядит как src/assets/fonts.

Шаг 2. Поместите файл.ttf вашего пользовательского шрифта внутрь этогоsrc/assets/fonts так что новый путь выглядит как src/assets/fonts/custom_font.ttf.

Шаг 3: Теперь в папкеfonts создайте новый файл.css, например font-file.css так что теперь путь выглядит как src/assets/fonts/font-file.css. Внутри этого файла напишите следующее:

@font-face {
  font-family: "my_custom_font";
  src: url("./custom_font.ttf") format("opentype");
}

Вот как должна выглядеть ваша структура каталогов после трех шагов,

src -
     |
      - ...   //other folders
     | 
      - assets // assets folder
              |
               -fonts // fonts folder
                     |
                      -font-file.css //.css file
                     |
                      -custom_font.ttf //.ttf file

Шаг 4. Перейдите к своемуangular.json файл и под самый первый options:{} атрибут у вас будет styles:[]. Здесь вставьте полный путь к вашемуfont-files.css Такие как

"options": {
            ...,
            "styles": [
              "src/styles.scss",
              "src/assets/fonts/font-file.css" //the path to your font-file.css which we defined earlier in step3
            ]

          }

Использование собственного шрифта

Теперь вы можете легко использовать недавно добавленный собственный шрифт, например,

body {
    ...
    font-family: 'my_custom_font', 'arial', sans-serif;
}

Answer 2

Добавьте семейство шрифтов в style.css следующим образом:

@font-face {
  font-family: 'appfont';
  src: url('/fonts/TitilliumWeb-Regular.ttf');
}

body {
  font-family: 'appfont', sans-serif;
}