L’Outil Surpuissant pour Exploser ton Chiffre d'Affaires en 2025 !
Comment utiliser au mieux les polices dans Angular ?
Dans cet article, j’expliquerai comment vous pouvez facilement incorporer des polices dans Angular pour personnaliser l’apparence de votre application Angular.
En tant que développeur frontend, l’utilisation d’une police personnalisée peut être délicate lors de la création d’un projet dans Angular JS. Parfois si vous souhaitez ajouter la police de votre choix à votre projet, vous devrez l’importer dans votre code (ce qui devient fastidieux et salissant).
Dans cet article, j’expliquerai comment vous pouvez facilement incorporer des polices dans Angular et prouver que ce n’est pas aussi intimidant que cela puisse paraître.
Pourquoi avons-nous besoin d’importer une police dans Angular ?
Il y a plusieurs raisons pour lesquelles nous pourrions avoir besoin d’importer une police dans Angular :
- Si nous utilisons une police personnalisée pour notre interface utilisateur, nous devrons l’importer pour que le navigateur puisse l’afficher correctement.
- Si nous utilisons une police qui n’est pas largement disponible, nous devrons peut-être l’importer pour nous assurer que nos utilisateurs peuvent voir le contenu correctement.
- Si nous utilisons une police non prise en charge par le navigateur, nous devrons l’importer pour pouvoir l’utiliser dans notre application Angular.
Voyons comment nous pouvons inclure des polices dans notre projet Angular.
Conditions préalables
Étape 1 : créer un projet angulaire simple
Tout d’abord, utilisez la commande suivante dans votre invite de commande pour installer Angular :
npm install -g @angular/cli
Set-ExecutionPolicy -Scope CurrentUser -ExecutionPolicy RemoteSigned
Créons ensuite le nouveau projet à l’aide de la commande suivante :
ng new my-app
Pour exécuter l’application à l’aide de la commande suivante :
cd my-app
ng serve --open
C’est fait! Votre application devrait s’ouvrir automatiquement dans le navigateur sur l’URL : http://localhost:4200/.
Ça devrait ressembler à ça:
Étape 2 : Ajouter un code HTML personnalisé
La page d’accueil de notre application Angular est celle par défaut fournie avec l’application lorsque vous l’installez. Pour mettre à jour le code HTML, ouvrez le fichier index.html situé dans le dossier src.
Maintenant, remplacez le code existant par le code ci-dessous :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>MyApp</title>
<base href="/">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<h1>hello</h1>
<h2>this is my angular app</h2>
<p>i need to add some new custom font to the project</p>
</body>
</html>
Si vous redémarrez votre serveur et accédez à la page http://localhost:4200/il devrait vous montrer la page ci-dessous :
Étape 3 : Télécharger des polices gratuites
Pour ajouter la police personnalisée, nous devons d’abord la télécharger. Vous pouvez télécharger des polices de n’importe où, mais nous utilisons Google Fonts car elles sont gratuites et open source.
Nous devons télécharger les polices de Google Fonts dans .ttf formulaire, et vous pouvez suivre les étapes ci-dessous :
- Allez à la Site Web Google Fonts.
- Parcourez les différentes polices disponibles sur le site Web et cliquez sur celle que vous souhaitez télécharger.
- Sur la page suivante, vous verrez les différents styles disponibles pour la police. Sélectionnez le style que vous voulez et cliquez sur le bouton « Télécharger ».
- Une fenêtre contextuelle apparaîtra vous demandant d’enregistrer le fichier. Choisissez où vous voulez enregistrer le fichier et cliquez sur le bouton « Enregistrer ».
- La police va maintenant être téléchargée sur votre ordinateur au format zip, mais vous pouvez l’extraire pour obtenir le .ttf fichier à utiliser dans le projet Angular.
Étape 4 : Importer la police dans le projet angulaire
Le fichier .ttf doit être placé dans le src/actifs dossier afin d’importer un fichier de police dans un projet Angular. Une fois le fichier au bon emplacement, il peut être importé dans le projet en procédant comme suit :
- Dans le fichier src/styles.css, ajoutez un nouveau
@font-facerègle pour la police importée. Par exemple:@font-face { font-family: 'MyFont'; src: url('../assets/myfont.ttf'); }Remarque : Remplacez « myfont.ttf » par le nom du fichier de police que vous avez placé dans src/assets.
- Dans le composant où la police sera utilisée, ajoutez la police importée à la feuille de style du composant. Par exemple:
.my-component { font-family: 'MyFont'; } - C’est ça! La police sera désormais utilisée dans le composant.
Ajouter plus de polices au projet
Tout d’abord, nous avons importé et ajouté la police dans le dossier source.
Maintenant, nous avons ajouté les deux nouveaux @font-face règles pour importer la police dans le src/style.css dossier.
@font-face {
font-family: 'Fontone';
src: url('src/font/Poppins.ttf');
}
@font-face {
font-family: 'Fonttwo';
src: url('src/font/Smooch.ttf');
}
Puis juste changé la famille de police des balises h1 et h2 dans le src/index.html dossier:
h1{
font-family: Fontone;
}
h2{
font-family: Fonttwo;
}
Maintenant, si vous rechargez à nouveau la page, vous devriez voir le résultat ci-dessous :
Méthode alternative : importation de polices sans utiliser de fichier de polices
Si vous préférez utiliser des polices en ligne plutôt que des fichiers de polices, vous pouvez le faire. Comme à l’étape 3, vous pouvez sélectionner la police que vous souhaitez utiliser. Suivez ensuite ces étapes alternatives pour utiliser cette méthode :
- Accédez au site Web de Google Fonts à l’adresse https://fonts.google.com.
- Trouvez la police que vous souhaitez utiliser et cliquez sur le signe plus pour l’ajouter à votre liste « Mes polices ».
- Une fois que vous avez ajouté toutes les polices que vous souhaitez utiliser, cliquez sur le bouton « Utiliser » en haut de la page.
- Sur la page « Utiliser », sélectionnez l’onglet « @import ».
- Copiez le code fourni dans la section « Standard » et collez-le dans le
<head>de votre document HTML.
Ou:
Vous pouvez supprimer la balise de style du code et la coller directement dans le fichier src/style.css (en utilisant la règle d’importation). - C’est ça! Votre page Web utilisera désormais les polices que vous avez sélectionnées dans Google Fonts.
Noter: Il est facile d’utiliser la police en utilisant la règle d’importation. Cependant, l’importation d’une police en tant que fichier .ttf ou .otf fonctionne mieux. De cette façon, votre projet continuera de fonctionner même après la mise hors ligne de votre site Web.
Par exemple : collez le code ci-dessous dans le fichier src/style.css :
@import url('https://fonts.googleapis.com/css2?family=Smooch&display=swap');
h1{
font-family: Smooch;
}
Maintenant, si vous rechargez à nouveau la page Web, la page ci-dessous s’affichera :
Derniers mots
Nous espérons que vous avez apprécié notre article sur l’importation de nouvelles polices dans Angular. Forts de ces connaissances, nous savons que vous pouvez tirer le meilleur parti de votre projet Angular en utilisant la bonne police au bon endroit. Alors qu’est-ce que tu attends? Commencez à utiliser les bonnes polices dans votre projet Angular en suivant les étapes ci-dessus.
La création de chaque composant d’un projet Angular peut représenter beaucoup de travail. Vous pouvez utiliser le Interface utilisateur de Kendo pour Angular bibliothèque pour vos projets car elle est livrée avec plus de 100 composants d’interface utilisateur prédéfinis et personnalisables. Vous pouvez modifier et mettre à jour ces petits composants selon vos goûts ou les utiliser tels quels.
Source link