Aller au contenu

Comment utiliser les polices de caractères font avec CSS3

Il est temps de découvrir comment utiliser les polices de caractères avec CSS3.

C’est la première partie du cours, viendra ensuite la suite sur les polices de caractères embarquées via CSS3.

Retrouvez les polices CSS3 dans le cours vidéo ci-dessous.

[ppmaccordion][ppmtoggle title= »Afficher le texte de la vidéo »]

Comment utiliser les polices de caractères font avec CSS3

Bonjour à tous et bienvenu sur Développement Facile.

Ensemble on continue à découvrir les nouvelles possibilités offertes par CSS3, ce cours est consacré aux polices de caractères avec CSS, comment les utiliser ?

L’utilisation d’une police de caractères

Il faut savoir que vous pouvez utiliser des polices de caractères, ce cours sera divisé en 2 parties, dans la première partie vous allez apprendre à utiliser les polices de caractère communes qui sont déjà présentes sur l’ordinateur de votre internaute, dans la deuxième partie, vous allez apprendre à utiliser les polices de caractères importées, vos propres polices personnalisées qui sont originales, l’utilisateur va télécharger la police sur son PC, et pourvoir l’utiliser pour afficher votre site internet.
Là place aux polices de caractères qui sont déjà présentes sur son ordinateur, et comment les utiliser. Il suffit d’utiliser la balise font-family : Arial, vous avez un exemple de code source h1 font-family : arial, c’est-à-dire tous les textes qui sont dans les balises h1 seront affichées avec la police Arial, le 1 en arial.

Le style d’une police de caractères

Vous pouvez définir le style une police de caractères, je vous l’ai déjà expliqué dans un cours précédent, en italique, avec font-style italic, font-weight bold en gras, et pour définir la taille de la police c’est font-size avec une valeur en pixels, ou EM.

Voici un exemple de code source, comme je vous l’ai dit, vous pouvez cumuler plusieurs balises CSS pour le même élément, pour h1 on utilise la police de caractères Arial, on l’affiche en italique, on l’affiche en gras, et d’une taille de 33 pixels, dans votre document HTML, à chaque fois qu’il y aura des balises h1, elles seront avec la police arial, en italique, en gras, 33 pixels pour la hauteur du texte, vraiment très pratique.

Les polices système

Comme je vous l’ai dit, vous pouvez utiliser toutes les polices qui sont présentes sur l’ordinateur de votre utilisateur, il s’agit des polices système, font :caption vous pouvez utiliser les polices associées au bouton, font :icon les polices associées aux étiquettes d’une icône, et donc évidemment sous Mac, Linux et Windows, ce sera des polices différentes, votre site Internet, prenez en compte qu’il va s’afficher avec des polices différentes si vous utilisez les polices système.
Font :menu la police associée au menu, font :message-box la police associée aux fenêtre des boîtes de dialogue, font :small-caption les polices associées aux petites étiquettes, et font :status-bar la police associée à la barre de statut.

Votre plan d’actions !

Comme je vous l’ai dit, rendez-vous dans la deuxième partie de CSS pour utiliser vos polices personnalisées, charger des polices de caractères à la volée par l’utilisateur. Retrouvez l’exemple de code source directement sous ce cours vidéo, si vous avez des questions posez-les également sous ce cours vidéo et moi je vous dis à très bientôt sur Développement Facile.

 

[/ppmtoggle][/ppmaccordion]

Téléchargez le code source CSS3

Voici un exemple de code CSS3 avec ds polices de caractères différentes.

Téléchargement du code source Exemple CSS3 de polices de caractères

Cliquez ici pour télécharger le code source Exemple CSS3 de polices de caractères

Quelles sont vos polices préférées ?

Partagez, dans les commentaires, vos polices de caractères préférées lorsque vous créez vos sites web.

EXCLUSIF : Les 7 Secrets Révélés de JavaScript pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : La formation « JavaScript Facile » OFFERTE pour Créer VOS Applications — dès la semaine prochaine !

EXCLUSIF : Créez VOS Applications JavaScript — en moins de 7 jours grâce à notre formation OFFERTE « JavaScript Facile »

Que diriez-vous de Concevoir des Applications Mobiles Magnifiques — d’ici les 7 prochains jours ?

TÉLÉCHARGEZ : Les codes sources du livre « HTML5 / CSS3 » pour Créer VOS Applications Mobiles — d’ici les 7 prochains jours !

Cliquez ici pour tout recevoir >>