Ajout de Polices Personnalisées à une Page Web
Les polices jouent un rôle crucial dans l'amélioration de l'attrait visuel d'une page web. Les concepteurs créent de nombreuses polices mémorables et esthétiques afin de laisser une impression durable aux utilisateurs. Les sites web dotés de polices mal conçues peuvent avoir du mal à attirer l'attention. Heureusement, il existe des ressources offrant un accès gratuit, permettant à chacun d'utiliser des polices préexistantes. Cependant, il est important de noter qu'il existe également des polices sous licence nécessitant un achat, et il est essentiel de respecter les lois sur le droit d'auteur afin d'éviter toute infraction.
Service Google Fonts
De nombreuses polices attrayantes sont disponibles en utilisation gratuite. Examinons les options proposées par https://fonts.google.com/. Il est simple d'ajouter une police Google dans le balisage.
Commençons par exécuter l'exemple suivant, qui utilise la police par défaut. L'élément p possède les propriétés suivantes : font-family (nom de la police), font-size (taille de la police) et font-weight (épaisseur de la police).
index.html
styles.css
La propriété font-family ne fonctionne pas car notre projet n’a pas encore connaissance de la police personnalisée « DM Sans ». Ajoutons la police au projet en utilisant https://fonts.google.com/.
Dans le champ de saisie « Search fonts », saisir le nom de la police souhaitée. Dans ce cas, il s’agit de « DM Sans ». Une fois affichée, cliquer sur la carte de « DM Sans ».
Sur la page de la police, cliquer sur le bouton « Get font ».
Ensuite, cliquer sur le bouton « Obtenir le code d'intégration ».
Enfin, copier le lien et le coller dans le fichier HTML de votre projet à l'intérieur de l'élément <head>. Il est important d'insérer le lien avant celui de vos styles personnalisés. Cela garantit que le navigateur chargera d'abord les polices personnalisées avant d'appliquer les styles qui les utilisent. Une fois le lien ajouté, « DM Sans » sera disponible comme police personnalisée pour votre projet. Vérifier ensuite le bon fonctionnement du projet.
index.html
styles.css
Nous pouvons observer la différence entre la police personnalisée et la police par défaut. De plus, chaque navigateur possède ses propres polices par défaut. Ainsi, il est essentiel de savoir comment utiliser des polices personnalisées sur un site web.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Awesome!
Completion rate improved to 2.56Ajout de Polices Personnalisées à une Page Web
Glissez pour afficher le menu
Les polices jouent un rôle crucial dans l'amélioration de l'attrait visuel d'une page web. Les concepteurs créent de nombreuses polices mémorables et esthétiques afin de laisser une impression durable aux utilisateurs. Les sites web dotés de polices mal conçues peuvent avoir du mal à attirer l'attention. Heureusement, il existe des ressources offrant un accès gratuit, permettant à chacun d'utiliser des polices préexistantes. Cependant, il est important de noter qu'il existe également des polices sous licence nécessitant un achat, et il est essentiel de respecter les lois sur le droit d'auteur afin d'éviter toute infraction.
Service Google Fonts
De nombreuses polices attrayantes sont disponibles en utilisation gratuite. Examinons les options proposées par https://fonts.google.com/. Il est simple d'ajouter une police Google dans le balisage.
Commençons par exécuter l'exemple suivant, qui utilise la police par défaut. L'élément p possède les propriétés suivantes : font-family (nom de la police), font-size (taille de la police) et font-weight (épaisseur de la police).
index.html
styles.css
La propriété font-family ne fonctionne pas car notre projet n’a pas encore connaissance de la police personnalisée « DM Sans ». Ajoutons la police au projet en utilisant https://fonts.google.com/.
Dans le champ de saisie « Search fonts », saisir le nom de la police souhaitée. Dans ce cas, il s’agit de « DM Sans ». Une fois affichée, cliquer sur la carte de « DM Sans ».
Sur la page de la police, cliquer sur le bouton « Get font ».
Ensuite, cliquer sur le bouton « Obtenir le code d'intégration ».
Enfin, copier le lien et le coller dans le fichier HTML de votre projet à l'intérieur de l'élément <head>. Il est important d'insérer le lien avant celui de vos styles personnalisés. Cela garantit que le navigateur chargera d'abord les polices personnalisées avant d'appliquer les styles qui les utilisent. Une fois le lien ajouté, « DM Sans » sera disponible comme police personnalisée pour votre projet. Vérifier ensuite le bon fonctionnement du projet.
index.html
styles.css
Nous pouvons observer la différence entre la police personnalisée et la police par défaut. De plus, chaque navigateur possède ses propres polices par défaut. Ainsi, il est essentiel de savoir comment utiliser des polices personnalisées sur un site web.
Merci pour vos commentaires !
