{"id":5351,"date":"2024-08-27T16:32:41","date_gmt":"2024-08-27T16:32:41","guid":{"rendered":"https:\/\/wikiform.fr\/codespace\/gestion-police-css-utiliser-font-family\/"},"modified":"2024-08-27T16:32:44","modified_gmt":"2024-08-27T16:32:44","slug":"gestion-police-css-utiliser-font-family","status":"publish","type":"post","link":"https:\/\/wikiform.fr\/codespace\/gestion-police-css-utiliser-font-family\/","title":{"rendered":"4.1 Gestion de la Police en CSS : Utiliser font-family"},"content":{"rendered":"\n<p><strong>Gestion de la police (font-family) en CSS<\/strong> est un aspect essentiel de la conception de sites web attrayants et lisibles. Comprendre comment utiliser la propri\u00e9t\u00e9 <strong>font-family<\/strong> en CSS peut transformer l&rsquo;apparence de votre site en un espace moderne et convivial. Apprenons comment d\u00e9finir et utiliser les polices en CSS gr\u00e2ce \u00e0 des exemples pratiques et faciles \u00e0 suivre.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Introduction \u00e0 la <strong>Propri\u00e9t\u00e9 font-family<\/strong><\/h2>\n\n\n\n<div id=\"videoContainer\" style=\"position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; background: #000;\">\n  <iframe src=\"https:\/\/player.vimeo.com\/video\/586305045?dnt=1&#038;fullscreen=0&#038;pip=0\" loading=\"lazy\" loading=\"lazy\" style=\"position: absolute; top: 0; left: 0; width: 100%; height: 100%;\" frameborder=\"0\" allow=\"autoplay\" allowfullscreen id=\"vimeoPlayer\"><\/iframe>\n  \n  <!-- Popup Desktop -->\n  <div id=\"popupContainer\" class=\"desktop-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; max-width: 400px; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <h2 style=\"color: #333; font-size: 1.5em; margin: 10px 0;\" id=\"profitez-de-loffre-spciale-\">Profitez de l\u2019offre sp\u00e9ciale !<\/h2>\n    <p style=\"color: #e74c3c; font-size: 1.2em; margin: 10px 0;\">Obtenez notre cours pour seulement <strong id=\"price\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: block; padding: 10px 20px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 1em; margin: 20px auto;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 10px 20px; font-size: 1em;\">Fermer<\/button>\n  <\/div>\n\n  <!-- Popup Mobile -->\n  <div id=\"popupContainerMobile\" class=\"mobile-popup\" style=\"display: none; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 300px; padding: 15px; border-radius: 10px; text-align: center; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); background-color: rgba(255, 255, 255, 0.95); box-sizing: border-box;\">\n    <p style=\"color: #e74c3c; font-size: 1em; margin: 5px 0;\">Cours sp\u00e9cial \u00e0 <strong id=\"priceMobile\">29.5\u20ac<\/strong> au lieu de <del>59\u20ac<\/del> !<\/p>\n    <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d%C3%A9butant-%C3%A0-expert\/141\" target=\"_blank\" style=\"display: inline-block; padding: 8px 15px; background-color: #701CF5; color: #fff; text-decoration: none; border-radius: 5px; font-weight: bold; font-size: 0.9em;\" rel=\"noopener\">Commencer maintenant<\/a>\n    <button onclick=\"closePopup()\" style=\"padding: 5px 10px; font-size: 0.9em;\">Fermer<\/button>\n  <\/div>\n<\/div>\n\n<script src=\"https:\/\/player.vimeo.com\/api\/player.js\"><\/script>\n<script>\ndocument.addEventListener('DOMContentLoaded', function() {\n    var iframe = document.getElementById('vimeoPlayer');\n    var player = new Vimeo.Player(iframe);\n    var isPopupDisplayed = false;\n\n    player.on('play', function() {\n        if (!isPopupDisplayed) {\n            player.on('timeupdate', function(data) {\n                if (data.seconds >= 120 && !isPopupDisplayed) { \/\/ 120 seconds = 2 minutes\n                    \/\/ Pause the video and display the popup\n                    player.pause().then(function() {\n                        if (window.innerWidth > 768) {\n                            document.querySelector('.desktop-popup').style.display = 'block';\n                        } else {\n                            document.querySelector('.mobile-popup').style.display = 'block';\n                        }\n                        fetchPriceAndUpdatePopup();\n                        isPopupDisplayed = true;\n                    });\n                }\n            });\n        }\n    });\n\n    function fetchPriceAndUpdatePopup() {\n        fetch('https:\/\/wikiform.fr\/application\/learnify\/home\/course\/devenir-un-d%C3%A9veloppeur-python\/144')\n            .then(response => response.text())\n            .then(html => {\n                var parser = new DOMParser();\n                var fetchedDoc = parser.parseFromString(html, 'text\/html');\n                var priceElement = fetchedDoc.querySelector('.ammount .fw-500');\n                var originalPriceElement = fetchedDoc.querySelector('.ammount del');\n                var price = priceElement ? priceElement.textContent.trim() : '29.5\u20ac';\n                var originalPrice = originalPriceElement ? originalPriceElement.textContent.trim() : '59\u20ac';\n\n                document.getElementById('price').textContent = price;\n                document.getElementById('priceMobile').textContent = price;\n                document.querySelector('.desktop-popup del').textContent = originalPrice;\n                document.querySelector('.mobile-popup del').textContent = originalPrice;\n            })\n            .catch(error => console.error('Error fetching the price:', error));\n    }\n\n    function closePopup() {\n        document.querySelector('.desktop-popup').style.display = 'none';\n        document.querySelector('.mobile-popup').style.display = 'none';\n        player.play(); \/\/ Allows resuming the video only after closing the popup\n    }\n});\n<\/script>\n\n\n\n<p>La propri\u00e9t\u00e9 CSS <code>font-family<\/code> permet de sp\u00e9cifier une ou plusieurs polices pour le texte d&rsquo;un \u00e9l\u00e9ment. Elle accepte une liste de noms de polices s\u00e9par\u00e9s par des virgules, o\u00f9 le navigateur utilisera la premi\u00e8re police disponible. Utiliser <code>font-family<\/code> de mani\u00e8re efficace peut am\u00e9liorer significativement l&rsquo;exp\u00e9rience utilisateur et la lisibilit\u00e9 de votre site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">D\u00e9finir des Polices avec <strong>font-family<\/strong><\/h3>\n\n\n\n<p>Pour d\u00e9finir les polices avec <code>font-family<\/code>, nous devons lister plusieurs noms de polices, en commen\u00e7ant par la police pr\u00e9f\u00e9r\u00e9e et en fournissant des alternatives en cas de non-disponibilit\u00e9. Voici un exemple simple :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    font-family: \"Helvetica Neue\", Helvetica, Arial, sans-serif;\n}<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, le texte utilisera <code>\"Helvetica Neue\"<\/code> si elle est disponible. Si ce n&rsquo;est pas le cas, il passera \u00e0 <code>Helvetica<\/code>, puis \u00e0 <code>Arial<\/code>, et enfin \u00e0 une police g\u00e9n\u00e9rique <code>sans-serif<\/code>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Utiliser des Polices Web avec Google Fonts<\/h3>\n\n\n\n<p>Google Fonts est une ressource populaire pour inclure des polices web gratuites dans vos projets. Voici comment utiliser Google Fonts :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-html\"><code>&lt;!-- Inclure le lien Google Fonts dans votre &lt;head&gt; --&gt;\n&lt;link href=\"https:\/\/fonts.googleapis.com\/css2?family=Roboto:wght@400;700&display=swap\" rel=\"stylesheet\"&gt;\n<\/code><\/pre>\n\n\n\n<p>Ensuite, utilisez les polices import\u00e9es dans votre code CSS :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    font-family: 'Roboto', sans-serif;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Combiner Plusieurs Polices pour Diff\u00e9rents Contextes<\/h3>\n\n\n\n<p>Il est souvent n\u00e9cessaire de combiner plusieurs polices pour diff\u00e9rents \u00e9l\u00e9ments de texte, comme les titres et les paragraphes, pour am\u00e9liorer la hi\u00e9rarchie visuelle. Voici comment proc\u00e9der :<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>h1, h2, h3 {\n    font-family: 'Playfair Display', serif;\n}\n\np {\n    font-family: 'Roboto', sans-serif;\n}<\/code><\/pre>\n\n\n\n<p>Dans cet exemple, les titres (h1, h2, h3) utilisent <code>Playfair Display<\/code>, qui est une police serif, tandis que les paragraphes utilisent <code>Roboto<\/code>, une police sans-serif, cr\u00e9ant ainsi un contraste \u00e9l\u00e9gant.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Polices de Secours et G\u00e9n\u00e9riques<\/h3>\n\n\n\n<p>Il est toujours recommand\u00e9 d\u2019utiliser des polices de secours et des familles g\u00e9n\u00e9riques pour garantir que le texte reste lisible m\u00eame si les polices personnalis\u00e9es ne sont pas charg\u00e9es correctement.<\/p>\n\n\n\n<pre class=\"wp-block-code lang-css\"><code>body {\n    font-family: \"Open Sans\", \"Helvetica Neue\", Arial, sans-serif;\n}<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Applications et Bonnes Pratiques de <strong>font-family<\/strong><\/h3>\n\n\n\n<p>Voici quelques bonnes pratiques \u00e0 suivre lors de l&rsquo;utilisation de <code>font-family<\/code> dans vos projets web :<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n  <li><strong>Optimisation des performances<\/strong> : Limitez le nombre de polices personnalis\u00e9es pour r\u00e9duire les temps de chargement. Pour approfondir ce sujet, vous pouvez consulter notre <a href=\"https:\/\/wikiform.fr\/codespace\/fonctionnement-navigateur-web-html-guide\" target=\"_blank\" rel=\"noopener\">guide sur le fonctionnement des navigateurs web<\/a>.<\/li>\n  <li><strong>Consistance<\/strong> : Utilisez des polices coh\u00e9rentes tout au long de votre site pour une exp\u00e9rience utilisateur harmonieuse. D\u00e9couvrez les <a href=\"https:\/\/wikiform.fr\/codespace\/creer-premiere-page-html-tutoriel-facile\" target=\"_blank\" rel=\"noopener\">base pour cr\u00e9er une premi\u00e8re page HTML<\/a>.<\/li>\n  <li><strong>Accessibilit\u00e9<\/strong> : Choisissez des polices facilement lisibles et testez-les sur diff\u00e9rents appareils et tailles d&rsquo;\u00e9cran. Pour plus de d\u00e9tails, consultez notre <a href=\"https:\/\/wikiform.fr\/codespace\/elements-textuels-html-guide-complet\" target=\"_blank\" rel=\"noopener\">guide complet sur les \u00e9l\u00e9ments textuels en HTML<\/a>.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">Conclusion<\/h2>\n\n\n\n<p>L&rsquo;utilisation efficace de la <strong>propri\u00e9t\u00e9 font-family<\/strong> en CSS permet d&rsquo;enrichir l&rsquo;exp\u00e9rience utilisateur de vos sites web. En suivant les bonnes pratiques et en utilisant les ressources disponibles comme Google Fonts, vous pouvez cr\u00e9er des interfaces esth\u00e9tiques et fonctionnelles. Pour aller plus loin, consultez notre article sur <a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-avanc\u00e9\/155\">les techniques avanc\u00e9es en CSS<\/a>, et visitez \u00e9galement notre <a href=\"https:\/\/wikiform.fr\/codespace\/proprietes-css-texte-tout-comprendre\" target=\"_blank\" rel=\"noopener\">guide complet sur les propri\u00e9t\u00e9s CSS de texte<\/a>.<\/p>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d\u00e9butant-\u00e0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation CSS Offre 50%\" title=\"\"><\/a>\n\n\n\n<a href=\"https:\/\/wikiform.fr\/application\/learnify\/home\/course\/html5-et-css3-de-d\u00e9butant-\u00e0-expert\/141\" target=\"_blank\" rel=\"noopener\"><img decoding=\"async\" src=\"https:\/\/wikiform.fr\/codespace\/wp-content\/uploads\/2024\/07\/learnify-formation-HTML-ET-CSS-offre-50.gif\" loading=\"lazy\" alt=\"Learnify Formation HTML et CSS Offre 50%\" title=\"\"><\/a>\n","protected":false},"excerpt":{"rendered":"<p>Gestion de la police (font-family) en CSS est un aspect essentiel de la conception de sites web attrayants et lisibles. Comprendre comment utiliser la propri\u00e9t\u00e9&#8230;<\/p>\n","protected":false},"author":2,"featured_media":2742,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[3,8],"tags":[18],"class_list":["post-5351","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-3-css","category-2-html","tag-tutoriels"],"acf":[],"_titre_de_la_formation":null,"_description_":null,"_objectifs_pedagogiques":null,"_programme_":null,"_url_de_limage":null,"_materiel_necessaire":null,"_modalites_devaluation_des_acquis":null,"_moyens_pedagogiques_et_techniques":null,"_accessibilite_":null,"_formateur_":null,"menu_order":0,"_links":{"self":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5351","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/comments?post=5351"}],"version-history":[{"count":1,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5351\/revisions"}],"predecessor-version":[{"id":5352,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/posts\/5351\/revisions\/5352"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media\/2742"}],"wp:attachment":[{"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/media?parent=5351"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/categories?post=5351"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wikiform.fr\/codespace\/wp-json\/wp\/v2\/tags?post=5351"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}