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

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

ПРИМЕЧАНИЕ: я использую angular-cli: [email protected]

  1. Я положил шрифты в папку

    SRC/активы/шрифты/Roboto-Regular.tff

  2. Я добавляю в src/styles.css

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

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

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

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

    Не удается найти клиент модуля "./assets/fonts/Roboto-Regular.tff"? 93b6: 80./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css Модуль не найден: Ошибка: не удается разрешить "./assets/fonts/Roboto-Regular.tff" в "D:\Work\Blah\angular\BlahFrontEnd\src 'resolv"./assets/fonts/Roboto-Regular.tff "в" D:\Work\Blah\angular\BlahFrontEnd\src 'с использованием файла описания: D:\Work\Blah\angular\BlahFrontEnd\package.json (относительный путь:./src) Поле' browser 'не содержит действительного псевдонима конфигурация после использования файла описания: D:\Work\Blah\angular\BlahFrontEnd\package.json (относительный путь:./src) с использованием файла описания: D:\Work\Blah\angular\BlahFrontEnd\package.json (относительный путь:./src/assets/fonts/Roboto-Regular.tff) в качестве каталога D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff не существует без расширения Поле 'browser' hasn ' t содержит допустимую конфигурацию псевдонима. D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff не существует .ts Поле 'browser' не совпадает сохранить правильную конфигурацию псевдонима D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.ts не существует .js Поле 'browser' не содержит действительной конфигурации псевдонима D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.js не существует [D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff] [ D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff] [D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.ts] [ D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.js] @./~/css-loader?sourcemap!./~/postcss-loader!./src/styles. css 6: 793-837 @./src/styles.css @multi styles

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

    jquery.js: 2 GET http://localhost: 4200/assets/fonts/Roboto-Regular.tff 404

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

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

Ответы

Ответ 1

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

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

npm install roboto-fontface --save

Добавьте к стилям в .angular-cli.json (apps[0].styles):

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

Все это!

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

Ответ 2

Вы пытались использовать URL-адрес googlefont из https://fonts.google.com?

В ваших styles.css:

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

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

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

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

Ответ 3

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

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

npm install roboto-fontface --save

Импорт в файл styles.scss

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

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

Ответ 4

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

@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"); }

Ответ 5

Это лучший способ использовать шрифт Google локально с углом 2,4,5,6,7 и более, сначала загрузите шрифт Google, и это в папке активов, и используйте его в соответствии с вашими требованиями.

В angular.json это называется в src/assets

"assets": [
    "src/assets"
 ],

В файле CSS добавьте это font-face вверху

@font-face {
  font-family: 'Roboto';
  src: url(/assets/Roboto/Roboto-Regular.ttf) format("truetype");
  font-weight: 400;
}

Наконец, используйте его согласно вашему требованию, как

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