web-dev-qa-db-fra.com

angular2-cli inclut des polices personnalisées

J'essaie d'inclure des polices personnalisées dans mon projet sans succès.

NOTE: J'utilise angular-cli: [email protected]

  1. Je mets les polices dans le dossier

    src/assets/fonts/Roboto-Regular.tff

  2. J'ajoute dans src/styles.css

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

  3. Je l'utilise dans un composant .scss

    famille de polices: "Roboto-Regular";

  4. Je reçois une erreur 404:

    Impossible de trouver le module "./assets/fonts/Roboto-Regular.tff" client? 93b6: 80 ./~/css-loader?sourcemap!./~/postcss-loader!./src/styles.css Module non trouvé: Erreur: Impossible de résoudre le problème './assets/fonts/Roboto-Regular.tff' dans 'D:\Work\Blah\angular\BlahFrontEnd\src' resol './assets/fonts/Roboto-Regular.tff' in ' D:\Work\Blah\angular\BlahFrontEnd\src 'à l'aide du fichier de description: D:\Work\Blah\angular\BlahFrontEnd\package.json (chemin relatif: ./src) Le champ "browser" ne contient pas d'alias valide. configuration après utilisation du fichier de description: D:\Work\Blah\angular\BlahFrontEnd\package.json (chemin relatif: ./src) à l'aide du fichier de description: D:\Work\Blah\angular\BlahFrontEnd\package.json (chemin relatif: ./src/assets/fonts/Roboto-Regular.tff) en tant que répertoire D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff n’existe pas d’extension Le champ 'browser' ne ' ne contient pas une configuration d'alias valide D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff n'existe pas .ts Le champ 'browser' n'est pas co Pour obtenir une configuration d'alias valide, D:\Work\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.ts n'existe pas .js Le champ 'browser' ne contient pas de configuration d'alias valide D:\Le travail\Blah\angular\BlahFrontEnd\src\assets\fonts\Roboto-Regular.tff.js n'existe pas [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. Si j'ajoute la définition font-face dans app.component.scss Je reçois aussi une erreur 404

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

Des idées pour inclure ma police Roboto-Regular.tff?

Meilleures salutations

angularfontswebpackangular2-cli
28
mp3por

Pour les personnes qui arrivent ici en cherchant:

Installer avec npm:

npm install roboto-fontface --save

Ajouter aux styles dans .angular-cli.json (apps[0].styles):

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

C'est tout!

Edit: since Angular 6 ce fichier s’appelle angular.json au lieu de angular-cli.json. L'ajout de polices fonctionne toujours de la même manière qu'auparavant.

57
Gideon

Avez-vous essayé d'utiliser l'URL googlefont de https://fonts.google.com ?

Dans votre styles.css:

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

Ensuite, utilisez la famille de polices dans styles.css ou partout où vous en avez besoin:

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

J'utilise ceci dans mon projet et cela fonctionne bien.

17
RichieRock

Si vous utilisez SCSS, vous pouvez:

Installer roboto-fontface

npm install roboto-fontface --save

Importer sur votre fichier styles.scss

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

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

Ce que vous avez fait était correct, mais avec une petite erreur:

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

Vous avez donné tff au lieu de ttf

Essaye ça :

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

C'est la meilleure façon d'utiliser la police Google localement avec angular 2,4,5,6,7 et plus, premier téléchargement de Google Font et son contenu dans le dossier des actifs. et l'utiliser est selon vos besoins.

Dans angular.json appelez ceci dans src/assets

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

Dans le fichier css, ajoutez cette police de caractères en haut.

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

À la dernière utilisation selon votre condition comme

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