angular2-cli включает пользовательские шрифты

Я пытаюсь включить некоторые пользовательские шрифты в свой проект без успеха.

примечание: Я использую angular-cli: angular-cli@1.0.0-beta - ... 21

  1. я помещаю шрифты в папку

    src / активы/шрифты / Roboto-регулярные.tff

  2. добавить в src/styles.css

    @font-face { шрифт-семейный: "Roboto-обычный"; src: url("./ активы/шрифты / Roboto-регулярные.tff"); }

  3. Я использую его в компонент .scss

    семейство шрифтов: "Roboto-Regular";

  4. Я получаю ошибку 404:

    не удается найти модуль "./ активы/шрифты / Roboto-регулярные.tff" клиент?93b6: 80 ./~ / css-загрузчик?sourcemap!./~ / postcss-загрузчик!./ГРЦ/стили.стиль CSS Модуль не найден: ошибка: не удается разрешить"./ активы/шрифты / Roboto-регулярные.tff ' in 'D:WorkBlahangularBlahFrontEndsrc" решать.' / активы/шрифты / Roboto-регулярные.tff ' in 'D:WorkBlahangularBlahFrontEndsrc" использование файла описания: D:WorkBlahangularBlahFrontEndpackage.в JSON (относительный путь ./ГРЦ) Поле "браузер" не содержит допустимой конфигурации псевдонима после использования файла описания: D:WorkBlahangularBlahFrontEndpackage - ... в JSON (относительный путь ./ГРЦ) использование файла описания: D:WorkBlahangularBlahFrontEndpackage - ... в JSON (относительный путь ./ src / активы/шрифты / Roboto-регулярные.tff) как каталог D:WorkBlahangularBlahFrontEndsrcassetsfontsRoboto-Regular.tff не существует нет расширения Поле "браузер" не содержит допустимой конфигурации псевдонима D:WorkBlahangularBlahFrontEndsrcassetsfontsRoboto-Regular.tff не существует .ts Поле "браузер" не содержит допустимой конфигурации псевдонима D:WorkBlahangularBlahFrontEndsrcassetsfontsRoboto-Regular.tff.ТС не существует .Яш Поле "браузер" не содержит допустимой конфигурации псевдонима D:WorkBlahangularBlahFrontEndsrcassetsfontsRoboto-Regular.tff.JS не существовать [D:WorkBlahangularBlahFrontEndsrcassetsfontsRoboto-Regular.tff] [D:WorkBlahangularBlahFrontEndsrcassetsfontsRoboto-Regular.tff] [D:WorkBlahangularBlahFrontEndsrcassetsfontsRoboto-Regular.tff.ts] [D:WorkBlahangularBlahFrontEndsrcassetsfontsRoboto-Regular.tff.Яш] @ ./~ / css-загрузчик?sourcemap!./~ / postcss-загрузчик!./ГРЦ/стили.в CSS 6:793-837 @ ./ГРЦ/стили.стиль CSS @ multi styles

  5. Если я добавлю определение шрифта в app.component.scss Я вам 404 ошибка также

    С помощью jQuery.js: 2 GET http://localhost:4200/assets/fonts/Roboto-Regular.tff 404

любые идеи, как включить мой Roboto-Regular.шрифт ТФФ ?

С наилучшими пожеланиями

21
angular angular2-cli fonts webpack

4 ответов

для людей, прибывающих сюда в поисках:

установить с помощью npm:

npm install roboto-fontface --save

добавить в стили в .angular-cli.json (apps[0].styles):

"styles": [
    "styles.css",
    "../node_modules/roboto-fontface/css/roboto/roboto-fontface.css"
],

вот и все!

Edit: начиная с Angular 6 этот файл называется angular.json вместо angular-cli.json. Добавление шрифтов по-прежнему работает так же, как и раньше.

43

вы пробовали использовать url googlefont изhttps://fonts.google.com?

в своем стили.css:

@import url('https://fonts.googleapis.com/css?family=Roboto');

затем используйте семейство шрифтов в стилях.css или где вам нужно:

body, html {
  font-family: 'Roboto';
}

Я использую это в своем проекте, и он отлично работает.

17

при использовании SCSS вы можете:

установить roboto-fontface

npm install roboto-fontface --save

импорт на ваших стилях.файл scss

@import '~roboto-fontface/css/roboto/roboto-fontface.css';

body {
  font-family: Roboto, Helvetica, Arial, sans-serif;
}
7

то, что вы сделали, было правильно, но с небольшой ошибкой:

@font-face { font-family: "Roboto-Regular"; src: url("./assets/fonts/Roboto-Regular.tff"); }

вы дали tff вместо ttf

попробуйте это :

@font-face { font-family: "Roboto-Regular"; src: url("./assets/fonts/Roboto-Regular.ttf"); }
2