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.
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
