web-dev-qa-db-fra.com

Meilleures pratiques / Style pour importer une police dans angular Application Web 4 cli

J'ai travaillé sur un projet personnel Angular 4 et je voulais ajouter la famille de polices Ubuntu à mon application Angular. Quelle est la meilleure pratique ou le meilleur style pour ajout d'un certain nombre de polices personnalisées à un projet: j'ai actuellement enregistré la famille de polices ubuntu dans /assets/fonts/ubuntu-font-family-0.83 et l'ajoutée au fichier CSS le plus externe, app.component.css avec police. .

@font-face {
   font-family: 'Ubuntu';
   src: url('/assets/fonts/ubuntu-font-family-0.83/Ubuntu-R.ttf');
}

En mettant cela dans le composant d'origine, je n'ai pas à redéfinir la police dans les composants imbriqués, je le traite simplement comme une famille de polices par défaut.

Existe-t-il un moyen plus clair/meilleur de le faire tout en éliminant le code en double?

htmlcssangularfonts
21
ob1

Il existe un meilleur moyen d’inclure des polices sur le site Web, pas seulement pour angular app.

Commander https://fonts.google.com

Pourquoi c'est mieux?

  • performance supérieure
  • plus de chance que votre client ait des polices dans son cache
  • vous n'avez pas à vous soucier de joindre des fichiers et utilisez la bande passante Origin

Dans votre cas, vous importeriez ce qui suit dans votre fichier css:

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

Vous pouvez le placer dans le fichier principal .css, inclus dans index.html. Ou vous pouvez utiliser <link> tag et inclure des polices dans vos en-têtes (également dans index.html)

<link href="https://fonts.googleapis.com/css?family=Ubuntu" rel="stylesheet">
38
Maciej Treder

C'est la meilleure façon d'utiliser la police Google localement avec angular 2,4,5,6,7 et plus, commencez par télécharger Google Font et à l'ajouter 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: 'Montserrat';
  src: url(/assets/Montserrat/Montserrat-Light.ttf) format("truetype");
  font-weight:300;
}

À la dernière utilisation selon votre condition comme

body{
 font-family: 'Montserrat', sans-serif;
}
3
internthings