web-dev-qa-db-fra.com

Comment importer une nouvelle police dans un projet - Angular 5

Je souhaite importer une nouvelle police dans mon projet Angular 5.

J'ai essayé:

1) Copier le fichier sur assets/fonts /

2) l'ajouter aux styles .angular-cli.json

mais j'ai vérifié que le fichier n'est pas un .css, c'est un .otf qui fonctionne comme un .exe (c'est un programme d'installation), donc je ne sais pas vraiment comment l'importer. Une idée?

angularfonts
28
Mario

Vous devez placer les fichiers de polices dans le dossier des ressources (il peut s'agir d'un sous-dossier de polices dans les ressources) et y faire référence dans les styles:

@font-face {
  font-family: lato;
  src: url(assets/font/Lato.otf) format("opentype");
}

Une fois terminé, vous pouvez appliquer cette police n’importe où, par exemple:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'lato', 'arial', sans-serif;
}

Vous pouvez mettre la définition @font-face dans votre global styles.css ou styles.scss et vous pourrez faire référence à la police n'importe où, même dans votre CSS/SCSS spécifique à un composant. styles.css ou styles.scss est déjà défini dans angular-cli.json. Ou, si vous le souhaitez, vous pouvez créer un fichier CSS/SCSS distinct et le déclarer dans angular-cli.json avec le styles.css ou styles.scss comme:

"styles": [
  "styles.css",
  "fonts.css"
],
60
Saptarshi Basu

Vous pouvez essayer de créer un css pour votre police avec font-face (comme expliqué ici )

Étape # 1

Créez un fichier CSS avec une police et placez-le quelque part, comme dans assets/fonts

customfont.css 

@font-face {
    font-family: YourFontFamily;
    src: url("/assets/font/yourFont.otf") format("truetype");
}

Étape # 2

Ajoutez le css à votre fichier .angular-cli.json dans la configuration styles

"styles":[
 //...your other styles
 "assets/fonts/customFonts.css"
 ]

N'oubliez pas de redémarrer ng serve après l'avoir fait

Étape # 3

Utilisez la police dans votre code

composant.css 

span {font-family: YourFontFamily; }
13
David