Comment utiliser les polices de caractères font avec CSS3

2
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. jQLeadBrite("#leadplayer_video_element_532564C68BF22").leadplayer(false, "eyJnYSI6dHJ1Z Swib3ZlcmxheSI6ZmFsc2UsInBvd2VyZWRfYnkiOmZhbHNlLCJwb3dlcmVkX2J5X2xpbmsiOiJo dHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC8iLCJjb2xvcjEiOiIjRjVCQjB DIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiUkVDR VZPSVIgISIsInR4dF9wbGF5IjoiTGVjdHVyZSIsInR4dF9lbWwiOiJSZW5zZWlnbmV6IHZvdHJlIE VtYWlsLi4uIiwidHh0X25hbWUiOiJSZW5zZWlnbmV6IHZvdHJlIFByXHUwMGU5bm9tLi4uIiwidH h0X2ludmFsaWRfZW1sIjoiU1ZQLCByZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X2ludm FsaWRfbmFtZSI6IlNWUCwgcmVuc2VpZ25leiB2b3RyZSBQclx1MDBlOW5vbS4uLiIsImxwX3Nv dXJjZSI6IldQIFBsdWdpbiAxLjQuMi4xIFVubGltaXRlZCIsImlkIjoiNTMyNTY0QzY4QkYyMiIsIndp ZHRoIjo5NDAsImhlaWdodCI6NTI5LCJ0aHVtYm5haWwiOiIiLCJ0aXRsZSI6IkNvbW1lbnQgdXR pbGlzZXIgbGVzIHBvbGljZXMgZGUgY2FyYWN0XHUwMGU4cmVzIGZvbnQgYXZlYyBDU1MzIi wiZGVzY3JpcHRpb24iOiJDb21tZW50IHV0aWxpc2VyIGxlcyBwb2xpY2VzIGRlIGNhcmFjdFx1M DBlOHJlcyBmb250IGF2ZWMgQ1NTMyIsImF1dG9wbGF5IjpmYWxzZSwic2hvd190aW1lbGluZ SI6dHJ1ZSwiZW5hYmxlX2hkIjp0cnVlLCJvcHQiOmZhbHNlLCJjdGEiOnsidGltZSI6ImVuZCIsIm J0ZXh0IjoiRGV2ZW5leiBQcm9mZXNzaW9ubmVsIEhUTUw1IFwvIENTUzMgZXQgQ3JcdTAwZ TlleiBkZXMgQXBwbGljYXRpb25zIEluY3JveWFibGVzICEiLCJ1cmwiOiJodHRwOlwvXC93d3cuc HJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC9odG1sNWNzczMiLCJhdXRvX2ZvbGxvdyI6ZmFs c2UsIm5ld193aW5kb3ciOmZhbHNlfSwieW0iOiJ1REhLRDVkRy1wQSJ9"); 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 1 / 2

Transcript of Comment utiliser les polices de caractères font avec CSS3

  • Il est temps de dcouvrir comment utiliser les polices de caractres avec CSS3. C'est lapremire partie du cours, viendra ensuite la suite sur les polices de caractres embarques viaCSS3. Retrouvez les polices CSS3 dans le cours vido ci-dessous.

    jQLeadBrite("#leadplayer_video_element_532564C68BF22").leadplayer(false, "eyJnYSI6dHJ1ZSwib3ZlcmxheSI6ZmFsc2UsInBvd2VyZWRfYnkiOmZhbHNlLCJwb3dlcmVkX2J5X2xpbmsiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC8iLCJjb2xvcjEiOiIjRjVCQjBDIiwiY29sb3IyIjoiIzE3OThDRCIsImNvbG9yMyI6IiNGNUJCMEMiLCJ0eHRfc3VibWl0IjoiUkVDRVZPSVIgISIsInR4dF9wbGF5IjoiTGVjdHVyZSIsInR4dF9lbWwiOiJSZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X25hbWUiOiJSZW5zZWlnbmV6IHZvdHJlIFByXHUwMGU5bm9tLi4uIiwidHh0X2ludmFsaWRfZW1sIjoiU1ZQLCByZW5zZWlnbmV6IHZvdHJlIEVtYWlsLi4uIiwidHh0X2ludmFsaWRfbmFtZSI6IlNWUCwgcmVuc2VpZ25leiB2b3RyZSBQclx1MDBlOW5vbS4uLiIsImxwX3NvdXJjZSI6IldQIFBsdWdpbiAxLjQuMi4xIFVubGltaXRlZCIsImlkIjoiNTMyNTY0QzY4QkYyMiIsIndpZHRoIjo5NDAsImhlaWdodCI6NTI5LCJ0aHVtYm5haWwiOiIiLCJ0aXRsZSI6IkNvbW1lbnQgdXRpbGlzZXIgbGVzIHBvbGljZXMgZGUgY2FyYWN0XHUwMGU4cmVzIGZvbnQgYXZlYyBDU1MzIiwiZGVzY3JpcHRpb24iOiJDb21tZW50IHV0aWxpc2VyIGxlcyBwb2xpY2VzIGRlIGNhcmFjdFx1MDBlOHJlcyBmb250IGF2ZWMgQ1NTMyIsImF1dG9wbGF5IjpmYWxzZSwic2hvd190aW1lbGluZSI6dHJ1ZSwiZW5hYmxlX2hkIjp0cnVlLCJvcHQiOmZhbHNlLCJjdGEiOnsidGltZSI6ImVuZCIsImJ0ZXh0IjoiRGV2ZW5leiBQcm9mZXNzaW9ubmVsIEhUTUw1IFwvIENTUzMgZXQgQ3JcdTAwZTlleiBkZXMgQXBwbGljYXRpb25zIEluY3JveWFibGVzICEiLCJ1cmwiOiJodHRwOlwvXC93d3cucHJvZ3JhbW1hdGlvbi1mYWNpbGUuY29tXC9odG1sNWNzczMiLCJhdXRvX2ZvbGxvdyI6ZmFsc2UsIm5ld193aW5kb3ciOmZhbHNlfSwieW0iOiJ1REhLRDVkRy1wQSJ9");

    Afficher le texte de la vidoComment utiliser les polices de caractres font avec CSS3 Bonjour tous et bienvenu surDveloppement Facile. Ensemble on continue dcouvrir les nouvelles possibilits offertes parCSS3, ce cours est consacr aux polices de caractres avec CSS, comment les utiliser?L'utilisation d'une police de caractres Il faut savoir que vous pouvez utiliser des polices decaractres, ce cours sera divis en 2 parties, dans la premire partie vous allez apprendre utiliser les polices de caractre communes qui sont dj prsentes sur l'ordinateur de votreinternaute, dans la deuxime partie, vous allez apprendre utiliser les polices de caractresimportes, vos propres polices personnalises qui sont originales, l'utilisateur va tlcharger lapolice sur son PC, et pourvoir l'utiliser pour afficher votre site internet. L place aux polices decaractres qui sont dj prsentes sur son ordinateur, et comment les utiliser. Il suffit d'utiliserla 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 affiches avec la police Arial, le 1 enarial.Le style d'une police de caractres Vous pouvez dfinir le style une police decaractres, je vous l'ai dj expliqu dans un cours prcdent, en italique, avec font-style italic,font-weight bold en gras, et pour dfinir la taille de la police c'est font-size avec une valeur enpixels, ou EM. Voici un exemple de code source, comme je vous l'ai dit, vous pouvez cumuler

    1 / 2

  • plusieurs balises CSS pour le mme lment, pour h1 on utilise la police de caractres Arial, onl'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 trs pratique.Les polices systme Comme je vousl'ai dit, vous pouvez utiliser toutes les polices qui sont prsentes sur l'ordinateur de votreutilisateur, il s'agit des polices systme, font :caption vous pouvez utiliser les polices associesau bouton, font :icon les polices associes aux tiquettes d'une icne, et donc videmmentsous Mac, Linux et Windows, ce sera des polices diffrentes, votre site Internet, prenez encompte qu'il va s'afficher avec des polices diffrentes si vous utilisez les polices systme. Font:menu la police associe au menu, font :message-box la police associe aux fentre des botesde dialogue, font :small-caption les polices associes aux petites tiquettes, et font :status-barla police associe la barre de statut.Votre plan d'actions ! Comme je vous l'ai dit, rendez-vous dans la deuxime partie de CSS pour utiliser vos polices personnalises, charger despolices de caractres la vole par l'utilisateur. Retrouvez l'exemple de code sourcedirectement sous ce cours vido, si vous avez des questions posez-les galement sous cecours vido et moi je vous dis trs bientt sur Dveloppement Facile.

    Tlchargez le code source CSS3Voici un exemple de code CSS3 avec ds polices de caractres diffrentes.

    Downloads

    Exemple CSS3 de polices de caractres

    Exemple de code CSS3 pour utiliser des polices de caractres.

    Quelles sont vos polices prfres ?Partagez, dans les commentaires, vos polices de caractres prfres lorsque vous crez vossites web.Comment utiliser les polices de caractres font avec CSS3

    Powered by TCPDF (www.tcpdf.org)

    2 / 2