diff options
Diffstat (limited to 'files/fr/learn/css/styling_text')
5 files changed, 50 insertions, 50 deletions
diff --git a/files/fr/learn/css/styling_text/fundamentals/index.md b/files/fr/learn/css/styling_text/fundamentals/index.md index 6b635b6014..f464b52f5f 100644 --- a/files/fr/learn/css/styling_text/fundamentals/index.md +++ b/files/fr/learn/css/styling_text/fundamentals/index.md @@ -43,12 +43,12 @@ Dans cet article, nous allons commencer le voyage vers la maîtrise des styles d Comme vous l'avez déjà vu dans votre apprentissage de HTML et CSS, le texte d'un élément est placé à l'intérieur de la boîte de contenu de cet élément. Il débute en haut à gauche de cette zone (ou en haut à droite, dans le cas des contenus en langues s'écrivant de droite à gauche) et se poursuit vers la fin de la ligne. Arrivé en bout de ligne, il descend à la ligne suivante et continue, puis va à la ligne suivante, jusqu'à ce que tout le contenu ait été placé. Les contenus textuels se comportent comme une suite d'éléments en ligne placés les uns à côté des autres. Aucun saut de ligne n'est créé avant que la fin de la ligne soit atteinte, sauf si vous forcez manuellement le saut de ligne avec l'élément {{htmlelement("br")}}. -> **Note :** si le paragraphe ci‑dessus vous paraît confus, pas de problème — revenez en arrière et revoyez l'article sur la théorie du [Modèle de boîte](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) avant de poursuivre. +> **Note :** si le paragraphe ci‑dessus vous paraît confus, pas de problème — revenez en arrière et revoyez l'article sur la théorie du [Modèle de boîte](/fr/Apprendre/CSS/Les_bases/Le_modèle_de_boîte) avant de poursuivre. Les propriétés CSS utilisées pour le style de texte appartiennent généralement à deux catégories, que nous verrons séparément dans cet article : -- **Styles de la police de caractères** : ces propriétés concernent la fonte appliquée au texte, affectant sa police, sa taille, sa graisse, si elle est italique, etc. -- **Styles de composition du texte** : ces propriétés influent sur les espacements et autres dispositions de mise en page du texte, permettant de modifier, par exemple, l'espacement entre lignes et entre caractères, et la manière de disposer le texte dans la boîte de contenu. +- **Styles de la police de caractères** : ces propriétés concernent la fonte appliquée au texte, affectant sa police, sa taille, sa graisse, si elle est italique, etc. +- **Styles de composition du texte** : ces propriétés influent sur les espacements et autres dispositions de mise en page du texte, permettant de modifier, par exemple, l'espacement entre lignes et entre caractères, et la manière de disposer le texte dans la boîte de contenu. > **Note :** Gardez à l'esprit que le texte à l'intérieur d'un élément est affecté comme une seule entité. Vous ne pouvez pas sélectionner et mettre en forme des sous-sections de texte, sauf si vous les enveloppez dans un élément approprié (tel que {{htmlelement ("span")}} ou {{htmlelement ("strong")}}, ou utilisez un texte pseudo-élément spécifique comme [::first-letter](/fr/docs/Web/CSS/::first-letter) (sélectionne la première lettre du texte d'un élément), [::first-line](/fr/docs/Web/CSS/::first-line) (sélectionne la première ligne du texte d'un élément) ou [::selection](/fr/docs/Web/CSS/::selection) (sélectionne le texte actuellement mis en surbrillance par le curseur) . @@ -76,7 +76,7 @@ Vous pouvez trouver l'[exemple (en) fini](https://mdn.github.io/learning-area/cs ### Couleur -La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}. +La propriété {{cssxref("color")}} définit la couleur du contenu d'avant‑plan des éléments sélectionnés (généralement du texte, mais peut être autre chose, comme un soulignement ou un surlignage créé avec la propriété {{cssxref("text-decoration")}}. `color` accepte toutes les [unités de couleur des CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CSS/Values_and_units#Couleurs), par exemple : @@ -106,7 +106,7 @@ occasions, comme maintenant.</p> ### Familles de fontes -Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela : +Pour définir une police de caractères différente pour le texte, utilisez la propriété {{cssxref("font-family")}} — cela vous permet de spécifier une police (ou une liste de polices) que le navigateur doit appliquer aux éléments sélectionnés. Le navigateur n'appliquera une police de caractères que si elle est disponible sur la machine sur laquelle le site est accessible, sinon, il utilisera une {{anch("Default fonts", "police par défaut")}} . Un exemple simple pour voir cela : ```css p { @@ -128,10 +128,10 @@ La liste des polices web vraiment sûres changera à mesure que les systèmes d' | --------------- | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | Arial | sans-serif | Il est de bonne pratique d'ajouter Helvetica en tant qu'alternative préférée d'Arial car, bien que leurs apparences soient presque identiques, Helvetica est considérée comme ayant une forme plus agréable, même si Arial est plus courante. | | Courier New | monospace | Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police _Courier New_ appelée _Courier_. Il est recommandé d'utiliser les deux avec _Courier New_ comme alternative préférée. | -| Georgia | serif |  | +| Georgia | serif | | | Times New Roman | serif | Certains systèmes d'exploitation ont une version alternative (peut-être plus ancienne) de la police _Times New Roman_ appelée _Times_. Il est recommandé d'utiliser les deux avec _Times New Roman_ comme alternative préférée. | | Trebuchet MS | sans-serif | Vous devriez être prudent avec l'utilisation de cette police - elle n'est pas aussi largement disponible sur les systèmes d'exploitation des mobiles. | -| Verdana | sans-serif |  | +| Verdana | sans-serif | | > **Note :** Le site [cssfontstack.com](https://www.cssfontstack.com/) met à votre disposition, entre autres ressources, une liste de polices web sûres disponibles sur les systèmes d'exploitation Windows et Mac OS. Elle peut faciliter votre prise de décision quant à ce que vous considérerez comme sûr pour votre usage. @@ -202,7 +202,7 @@ Dans l'article [Valeurs et unités CSS](/fr/Apprendre/CSS/Introduction_%C3%A0_CS - `px` (pixels) : le nombre de pixels souhaités pour la hauteur du texte. C'est une unité absolue — il en résulte une même valeur finale calculée de la police sur la page dans à peu près n'importe quelle situation. - `em` : 1 em est égal à la taille de la police définie sur l'élément parent de l'élément courant que nous composons (plus précisément, la largeur d'un « M » majuscule de l'élément parent). Cette valeur peut devenir difficile à déterminer si vous avez beaucoup d'imbrications avec diverses tailles de police, mais cela reste faisable, comme vous le verrez ci-dessous. Pourquoi s'embêter ? C'est assez naturel, une fois que vous y êtes habitué ; vous pouvez utiliser `em` pour tout dimensionner, pas seulement du texte. Vous pouvez avoir un site web entier dimensionné avec des `em`, la maintenance en sera facilitée. -- `rem` : il fonctionne comme `em`, excepté que un `rem` est égal à la taille de la police sur l'élément racine du document (c'est-à -dire {{htmlelement("html")}}) et non le parent direct). Le calcul des tailles de police en est facilité, mais malheureusement les `rem` ne sont pas pris en charge dans Internet Explorer 8 et avant. Si vous devez prendre en charge des navigateurs plus anciens dans votre projet, vous devrez vous en tenir aux `em` ou aux `px`, soit utiliser une prothèse d'émulation ({{glossary ("polyfill")}}) telle que [REM-unit-polyfill](https://github.com/chuckcarpenter/REM-unit-polyfill). +- `rem` : il fonctionne comme `em`, excepté que un `rem` est égal à la taille de la police sur l'élément racine du document (c'est-à -dire {{htmlelement("html")}}) et non le parent direct). Le calcul des tailles de police en est facilité, mais malheureusement les `rem` ne sont pas pris en charge dans Internet Explorer 8 et avant. Si vous devez prendre en charge des navigateurs plus anciens dans votre projet, vous devrez vous en tenir aux `em` ou aux `px`, soit utiliser une prothèse d'émulation ({{glossary ("polyfill")}}) telle que [REM-unit-polyfill](https://github.com/chuckcarpenter/REM-unit-polyfill). La propriété `font-size` d'un élément est héritée de son parent. Tout commence par l'élément racine de l'ensemble du document — {{htmlelement("html")}} — dont la propriété `font‑size` est normée à 16 px sur les navigateurs. Tout paragraphe (ou tout autre élément dont la taille n'a pas été définie différemment par le navigateur) à l'intérieur de l'élément racine aura une taille finale de 16 px. D'autres éléments peuvent avoir des tailles par défaut différentes, par exemple un élément {{htmlelement ("h1")}} a une taille de 2 `em` définie par défaut, donc aura une taille finale de 32 px. @@ -262,7 +262,7 @@ CSS fournit quatre propriétés communes pour modifier le poids et l'emphase vis - {{cssxref("font-style")}} : utilisé pour appliquer ou enlever le style italique. Les valeurs possibles sont les suivantes (vous ne l'utiliserez que rarement, sauf si vous souhaitez désactiver le style italique pour une raison quelconque) : - `normal` : fige le texte en police normale (suppression du style italique existant). - - `italic` : met le texte en _version italique de la police_ si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place. + - `italic` : met le texte en _version italique de la police_ si elle est disponible ; si elle n'existe pas, le style italique sera émulé avec l'option oblique à la place. - `oblique` : force le texte à utiliser une version simulée de fonte italique, créée en _inclinant la version normale_. - {{cssxref("font-weight")}} : définit la graisse du texte. La propriété peut avoir de nombreuses valeurs s'il y a de nombreuses variantes de polices disponibles (comme _-light_, _-normal_, _-bold_, _-extrabold_, _-black_, etc.), mais en réalité, vous les utiliserez rarement en dehors de `normal` et `bold` (gras): @@ -467,7 +467,7 @@ La propriété {{cssxref ("line-height")}} définit la hauteur de chaque ligne d line-height: 1.5; ``` -En appliquant cette règle à l'élément {{htmlelement("p")}} de l'exemple, nous obtenons : +En appliquant cette règle à l'élément {{htmlelement("p")}} de l'exemple, nous obtenons : ```html hidden <h1>Tommy le Chat</h1> @@ -632,7 +632,7 @@ Si vous faites une erreur, vous pouvez toujours _Réinitialiser_ avec le bouton <div class="body-wrapper" style="font-family: 'Open Sans Light',Helvetica,Arial,sans-serif;"> <h2>Zone de saisie du HTML</h2> <textarea id="code" class="html-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;"> - <p>Un peu de texte pour vous délecter !</p></textarea> + <p>Un peu de texte pour vous délecter !</p></textarea> <h2>Zone de saisie de la CSS</h2> <textarea id="code" class="css-input" style="width: 90%;height: 10em;padding: 10px;border: 1px solid #0095dd;">p { diff --git a/files/fr/learn/css/styling_text/styling_links/index.md b/files/fr/learn/css/styling_text/styling_links/index.md index 7a3df96337..51f4254af0 100644 --- a/files/fr/learn/css/styling_text/styling_links/index.md +++ b/files/fr/learn/css/styling_text/styling_links/index.md @@ -286,7 +286,7 @@ reset.addEventListener("click", function() { solution.addEventListener("click", function() { htmlInput.value = htmlCode; - cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}'; + cssInput.value = 'p {\n font-size: 1.2rem;\n font-family: sans-serif;\n line-height: 1.4;\n}\n\na {\n outline: none;\n text-decoration: none;\n padding: 2px 1px 0;\n}\n\na:link {\n color: #265301;\n}\n\na:visited {\n color: #437A16;\n}\n\na:focus {\n border-bottom: 1px solid;\n background: #BAE498;\n}\n\na:hover {\n border-bottom: 1px solid;\n background: #CDFEAA;\n}\n\na:active {\n background: #265301;\n color: #CDFEAA;\n}'; drawOutput(); }); diff --git a/files/fr/learn/css/styling_text/styling_lists/index.md b/files/fr/learn/css/styling_text/styling_lists/index.md index 73a34ac54f..ab9dece0d8 100644 --- a/files/fr/learn/css/styling_text/styling_lists/index.md +++ b/files/fr/learn/css/styling_text/styling_lists/index.md @@ -362,7 +362,7 @@ reset.addEventListener("click", function() { solution.addEventListener("click", function() { htmlInput.value = htmlCode; - cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; + cssInput.value = 'ul {\n list-style-type: square;\n}\n\nul li, ol li {\n line-height: 1.5;\n}\n\nol {\n list-style-type: lower-alpha\n}'; drawOutput(); }); diff --git a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md index fa70e80c22..8bea87956b 100644 --- a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md +++ b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.md @@ -15,7 +15,7 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage --- {{LearnSidebar}}{{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} -Dans cette évaluation, nous testerons votre compréhension de toutes les techniques pour la composition de textes à l'écran présentées au cours de ce module : elle consiste à créer la page d'accueil du site d'une école communale. Vous ne devriez avoir que du plaisir tout au long de ce parcours. +Dans cette évaluation, nous testerons votre compréhension de toutes les techniques pour la composition de textes à l'écran présentées au cours de ce module : elle consiste à créer la page d'accueil du site d'une école communale. Vous ne devriez avoir que du plaisir tout au long de ce parcours. <table class="standard-table"> <tbody> @@ -38,7 +38,7 @@ Dans cette évaluation, nous testerons votre compréhension de toutes les techni ## Point de départ -Pour débuter cette évaluation, vous devez : +Pour débuter cette évaluation, vous devez : - récupérer les fichiers [HTML](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/index.html) et [CSS](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/style.css) de l'exercice ainsi que [le lien externe sur l'icône](https://github.com/mdn/learning-area/blob/master/css/styling-text/typesetting-a-homepage-start/external-link-52.png). - en faire une copie sur votre ordinateur. @@ -47,15 +47,15 @@ Pour débuter cette évaluation, vous devez : ## Énoncé de l'exercice -Nous mettons à votre disposition un HTML pour la page d'accueil du site internet d'un collège de communauté imaginaire, plus certains éléments de la CSS composant la page sur deux colonnes et fournissant d'autres rudiments de composition. Vous devez écrire des compléments à la CSS sous le commentaire au bas du fichier de façon à pouvoir marquer aisément vos ajouts. Ne vous tracassez pas si certains sélecteurs sont répétés : nous laisserons ce point de côté dans cet exemeple. +Nous mettons à votre disposition un HTML pour la page d'accueil du site internet d'un collège de communauté imaginaire, plus certains éléments de la CSS composant la page sur deux colonnes et fournissant d'autres rudiments de composition. Vous devez écrire des compléments à la CSS sous le commentaire au bas du fichier de façon à pouvoir marquer aisément vos ajouts. Ne vous tracassez pas si certains sélecteurs sont répétés : nous laisserons ce point de côté dans cet exemeple. -Fontes : +Fontes : -- Primo, téléchargez quelques polices gratuites. Comme il s'agit d'un collège, les polices choisies doivent donner à la page une impression de sérieux, de formalisme et de confiance — une police sérif ample pour le corps du texte général, associée une police sans sérif ou bloc sérif pour les en-têtes serait pas mal. -- Ensuite, utilisez le service ad-hoc pour créer le « bulletproof `@font-face` code » pour ces deux fontes. +- Primo, téléchargez quelques polices gratuites. Comme il s'agit d'un collège, les polices choisies doivent donner à la page une impression de sérieux, de formalisme et de confiance — une police sérif ample pour le corps du texte général, associée une police sans sérif ou bloc sérif pour les en-têtes serait pas mal. +- Ensuite, utilisez le service ad-hoc pour créer le « bulletproof `@font-face` code » pour ces deux fontes. - Appliquez la police pour le corps à toute la page et celle pour les titres aux en‑têtes. -Style général du texte : +Style général du texte : - Donnez à la page une propriété `font-size` de `10px` sur tout le site. - Donnez aux titres et autres types d'éléments des tailles de polices appropriées définie avec une unité relative adéquate. @@ -65,7 +65,7 @@ Style général du texte : - Donnez au corps du texte une valeur de propriété `letter-spacing` et `word-spacing` appropriée. - Donnez au premier paragraphe après chaque titre dans `<section>` une légère indentation, disons 20px. -Liens : +Liens : - Donnez aux liens, visités, ciblés et survolés des couleurs en accord avec celles des barres horizontales en haut et en bas de la page. - Faites en sorte que les liens soient soulignés par défaut, mais que le soulignement disparaisse lorsqu'ils sont ciblés ou survolés. @@ -73,12 +73,12 @@ Liens : - Donnez à l'état actif un style sensiblement différent pour qu'il se démarque bien, mais faites en sorte qu'il s'intègre à la conception globale de la page. - Faites en sorte que l'icône de lien externe soit insérée à côté des liens externes. -Listes : +Listes : -- Assurez-vous que l'espacement des listes et éléments de liste s'accorde bien avec le style d'ensemble de la page. Chaque élément de liste doit avoir la même valeur de propriété `line-height` qu'une ligne de paragraphe et chaque liste doit avoir le même espacement en haut et en bas que celui entre les paragraphes. +- Assurez-vous que l'espacement des listes et éléments de liste s'accorde bien avec le style d'ensemble de la page. Chaque élément de liste doit avoir la même valeur de propriété `line-height` qu'une ligne de paragraphe et chaque liste doit avoir le même espacement en haut et en bas que celui entre les paragraphes. - Mettez une belle puce, appropriée à la conception de la page, devant les éléments de la liste. À vous de décider si vous choisissez une image personnalisée ou autre chose. -Menu de navigation : +Menu de navigation : - Donnez à votre menu de navigation un style tel que son aspect soit en accord avec l'apparence et la convivialité de la page. @@ -89,13 +89,13 @@ Menu de navigation : ## Exemple -La capture d'écran ci-après montre un exemple possible du design terminé : +La capture d'écran ci-après montre un exemple possible du design terminé :  ## Évaluation -Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abors, il n'y rien à gagner en trichant ! +Si vous faites cet exercice dans le cadre d'un cours organisé, vous devez pouvoir donner votre travail à votre professeur pour notation. Si vous faites de l'auto-formation, vous pouvez obtenir le guide de notation très facilement en le demandant sur [le fil de discussion à propos de cet exercice](https://discourse.mozilla.org/t/fundamental-css-comprehension-assessment/24682) ou par l'intermédiaire du canal IRC [#mdn](irc://irc.mozilla.org/mdn) sur [Mozilla IRC](https://wiki.mozilla.org/IRC). Faites l'exercice d'abors, il n'y rien à gagner en trichant ! {{PreviousMenu("Learn/CSS/Styling_text/Web_fonts", "Learn/CSS/Styling_text")}} diff --git a/files/fr/learn/css/styling_text/web_fonts/index.md b/files/fr/learn/css/styling_text/web_fonts/index.md index 3374ac8986..70c4d1f26b 100644 --- a/files/fr/learn/css/styling_text/web_fonts/index.md +++ b/files/fr/learn/css/styling_text/web_fonts/index.md @@ -46,7 +46,7 @@ Ce système fonctionne bien, mais généralement, le choix des développeurs Web Mais il y a autre chose qui fonctionne très bien, depuis la version 6 d'IE. La fonctionnalité CSS des polices Web permet de définir les fichiers de polices à télécharger avec le site Web au fur et à mesure de sa consultation ; autrement dit, tout navigateur prenant en charge les polices Web aura exactement la police précisée à sa disposition. Incroyable ! La syntaxe requise ressemble à ce qui suit. -Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il précise le ou les fichiers de fontes à télécharger : +Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il précise le ou les fichiers de fontes à télécharger : ```css @font-face { @@ -55,7 +55,7 @@ Primo, un bloc {{cssxref("@font-face")}} est placé au début de la CSS ; il prà } ``` -Sous cette déclaration, vous pouvez utiliser le nom de la famille de polices précisé dans @font-face pour appliquer la police personnalisée où vous le voulez, normalement : +Sous cette déclaration, vous pouvez utiliser le nom de la famille de polices précisé dans @font-face pour appliquer la police personnalisée où vous le voulez, normalement : ```css html { @@ -65,7 +65,7 @@ html { La syntaxe peut devenir un peu plus complexe que cela, nous reviendrons sur le sujet plus bas. -Deux points important sont à garder présents à l'esprit à ce propos : +Deux points important sont à garder présents à l'esprit à ce propos : L'utilisation des polices n'est généralement pas gratuite. Vous devez payer pour les utiliser et/ou respecter d'autres conditions de licence telles que citer le créateur de la police dans le code (ou sur le site). Ne vous appropriez pas les polices et ne les utilisez pas sans donner le crédit voulu. @@ -74,9 +74,9 @@ L'utilisation des polices n'est généralement pas gratuite. Vous devez payer po > **Note :** La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 ! -## Apprentissage actif : un exemple de fonte web +## Apprentissage actif : un exemple de fonte web -En gardant en tête ce qui précède, construisons un exemple de police web de base à partir des premiers principes. Il est difficile de le montrer à l'aide d'un exemple direct intégré : nous aimerions donc que vous suiviez les étapes détaillées dans les paragraphes ci‑après afin d'avoir une idée du processus. +En gardant en tête ce qui précède, construisons un exemple de police web de base à partir des premiers principes. Il est difficile de le montrer à l'aide d'un exemple direct intégré : nous aimerions donc que vous suiviez les étapes détaillées dans les paragraphes ci‑après afin d'avoir une idée du processus. Utilisez les fichiers [web-font-start.html](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.html) et [web-font-start.css](https://github.com/mdn/learning-area/blob/master/css/styling-text/web-fonts/web-font-start.css) comme point de départ pour ajouter votre code (voir l'[exemple en direct](http://mdn.github.io/learning-area/css/styling-text/web-fonts/web-font-start.html) aussi.) Faites une copie de ces fichiers dans un nouveau répertoire sur votre ordinateur. Dans le fichier `web-font-start.css`, vous trouverez un CSS minimal pour traiter la mise en page et la composition de base de l'exemple. @@ -84,17 +84,17 @@ Utilisez les fichiers [web-font-start.html](https://github.com/mdn/learning-area -Dans cet exemple, nous utilisons deux polices web, une pour les en-têtes et une pour le corps du texte. Pour commencer, nous devons trouver les fichiers de ces polices. Les fontes des polices sont stockées en différents formats de fichiers. Il y a généralement trois types de sites où obtenir des fontes : +Dans cet exemple, nous utilisons deux polices web, une pour les en-têtes et une pour le corps du texte. Pour commencer, nous devons trouver les fichiers de ces polices. Les fontes des polices sont stockées en différents formats de fichiers. Il y a généralement trois types de sites où obtenir des fontes : -- un distributeur de fontes gratuites : c'est un site de téléchargement de polices gratuites (la licence peut exiger certaines conditions, comme citer le créateur de la fonte). C'est le cas de [Font Squirrel](https://www.fontsquirrel.com/), [dafont](http://www.dafont.com/) et [Everything Fonts](https://everythingfonts.com/). -- un distributeur de fontes payantes : c'est un site qui met à disposition des fontes contre paiement, comme [fonts.com](http://www.fonts.com/) ou [myfonts.com](http://www.myfonts.com/). Vous pouvez aussi acheter directement auprès du fondeur, par exemple [Linotype](https://www.linotype.com/), [Monotype](http://www.monotype.com) ou [Exljbris](http://www.exljbris.com/). -- un service de fontes en ligne : c'est un site qui stocke et téléverse les polices à votre intention, facilitant ainsi l'ensemble du processus. Voir la section {{anch("Utiliser un service de polices en ligne")}} pour plus de détails. +- un distributeur de fontes gratuites : c'est un site de téléchargement de polices gratuites (la licence peut exiger certaines conditions, comme citer le créateur de la fonte). C'est le cas de [Font Squirrel](https://www.fontsquirrel.com/), [dafont](http://www.dafont.com/) et [Everything Fonts](https://everythingfonts.com/). +- un distributeur de fontes payantes : c'est un site qui met à disposition des fontes contre paiement, comme [fonts.com](http://www.fonts.com/) ou [myfonts.com](http://www.myfonts.com/). Vous pouvez aussi acheter directement auprès du fondeur, par exemple [Linotype](https://www.linotype.com/), [Monotype](http://www.monotype.com) ou [Exljbris](http://www.exljbris.com/). +- un service de fontes en ligne : c'est un site qui stocke et téléverse les polices à votre intention, facilitant ainsi l'ensemble du processus. Voir la section {{anch("Utiliser un service de polices en ligne")}} pour plus de détails. Cherchons des polices de caractères ! Allez dans [Font Squirrel](https://www.fontsquirrel.com/) et choisissez deux polices — une police adaptée aux en-têtes (peut-être une belle police d'affichage de blocs avec sérifs) et une police un peu moins criarde et plus lisible pour les paragraphes. Après avoir trouvé chaque police, appuyez sur le bouton de téléchargement et enregistrez le fichier dans le même répertoire que les fichiers HTML et CSS précéemment enregistrés. Peu importe qu'il s'agisse de TTF (True Type Fonts) ou OTF (Open Type Fonts). Dans chaque cas, décompressez le paquet de la fonte (les fontes Web sont généralement distribuées dans des fichiers ZIP contenant les fichiers de police et l'information de licence). Vous pouvez trouver plusieurs fichiers de polices dans le paquet — certaines fontes sont distribuées sous forme de familles avec plusieurs variantes disponibles, par exemple fine, moyenne, grasse, italique, italique fine, etc. Pour cet exemple, ne vous interessez qu'à un seul fichier pour chacun des deux cas. -> **Note :** Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher. +> **Note :** Dans la partie « Find fonts » dans la colonne de droite, vous pouvez cliquer sur les diverses marques et classification pour filtrer les chois à afficher. ### Créer le code requis @@ -104,7 +104,7 @@ Maintenant, créez le code requis (et les formats de police). Pour chaque police 2. Allez sur le [Webfont Generator](https://www.fontsquirrel.com/tools/webfont-generator) de Fontsquirrel. 3. Téléversez les deux fichiers de fontes avec le bouton _Upload Fonts_. 4. Cochez la case nommée « Yes, the fonts I'm uploading are legally eligible for web embedding » (_Oui, les fontes téléversées sont légalement éligibles à une intégration web_). -5. Cliquez sur « *Download your kit* » (_Télécharger le kit_) . +5. Cliquez sur « *Download your kit* » (_Télécharger le kit_) . Après que le générateur a terminé le traitement, vous obtenez un fichier ZIP à télécharger — enregistrez‑le dans le même répertoire que les fichiers HTML et CSS. @@ -112,16 +112,16 @@ Après que le générateur a terminé le traitement, vous obtenez un fichier ZIP Maintenant, faites l'extraction de l'ensemble des polices web crées. Dans le répertoire d'extraction, trois éléments utiles : -- Plusieurs versions de chaque police : (par ex., `.ttf`, `.woff`, `.woff2`, etc. ; les polices exactement fournies sont mises à jour au fur et à mesure des modifications des exigences de prise en charge des navigateurs). Comme mentionné ci‑dessus, plusieurs polices sont nécessaires pour une prise en charge croisée entre navigateurs — c'est le moyen choisi par Fontsquirrel pour s'assurer que vous avez bien ce qui est nécessaire. +- Plusieurs versions de chaque police : (par ex., `.ttf`, `.woff`, `.woff2`, etc. ; les polices exactement fournies sont mises à jour au fur et à mesure des modifications des exigences de prise en charge des navigateurs). Comme mentionné ci‑dessus, plusieurs polices sont nécessaires pour une prise en charge croisée entre navigateurs — c'est le moyen choisi par Fontsquirrel pour s'assurer que vous avez bien ce qui est nécessaire. - Un fichier HTML de démo pour chaque police — chargez‑les dans votre navigateur pour voir ce à quoi elles ressemblent dans divers contextes d'emploi. - Un fichier `stylesheet.css`, qui contient le code @font-face dont vous avez besoin. -Pour mettre en œuvre ces polices dans la démo, suivez ces étapes : +Pour mettre en œuvre ces polices dans la démo, suivez ces étapes : 1. Renommez le répertoire d'extraction avec quelque chose de simple, comme `fonts`. -2. Ouvrez le fichier `stylesheet.css` et copiez y les deux blocs `@font-face` contenus dans le fichier `web-font-start.css` — il faut les mettre tout en haut, avant tout élement du CSS, car les polices doivent être importées avant de pouvoir les utiliser sur votre site. -3. Chaque fonction `url()` pointe sur un fichier de police à importer dans la CSS — assurez‑vous que les chemins vers les fichiers soient corrects, donc ajoutez `fonts/` au début de chaque chemin (si nécessaire). -4. Maintenant, vous pouvez vous servir de ces polices dans vos piles de fontes, tout à fait comme les polices système ou une police « web safe ». Par exemple : +2. Ouvrez le fichier `stylesheet.css` et copiez y les deux blocs `@font-face` contenus dans le fichier `web-font-start.css` — il faut les mettre tout en haut, avant tout élement du CSS, car les polices doivent être importées avant de pouvoir les utiliser sur votre site. +3. Chaque fonction `url()` pointe sur un fichier de police à importer dans la CSS — assurez‑vous que les chemins vers les fichiers soient corrects, donc ajoutez `fonts/` au début de chaque chemin (si nécessaire). +4. Maintenant, vous pouvez vous servir de ces polices dans vos piles de fontes, tout à fait comme les polices système ou une police « web safe ». Par exemple : ```css font-family: 'zantrokeregular', serif; @@ -135,7 +135,7 @@ Vous devriez obtenir une page de démonstration avec les belles polices impléme ## Utiliser un service de polices en ligne -Les services de polices en ligne stockent et servent généralement des polices pour vous afin que vous n'ayez pas à vous soucier d'écrire le code `@font-face`, et en général, il suffit d'insérer une simple ligne ou deux de code dans votre site pour que tout fonctionne. Les exemples incluent [Typekit](https://typekit.com/) and [Cloud.typography](http://www.typography.com/cloud/welcome/). La plupart de ces services sont fondés sur l'abonnement, à l'exception notable de [Google Fonts](https://www.google.com/fonts), un service gratuit utile, en particulier pour les tests rapides et la rédaction de démos. +Les services de polices en ligne stockent et servent généralement des polices pour vous afin que vous n'ayez pas à vous soucier d'écrire le code `@font-face`, et en général, il suffit d'insérer une simple ligne ou deux de code dans votre site pour que tout fonctionne. Les exemples incluent [Typekit](https://typekit.com/) and [Cloud.typography](http://www.typography.com/cloud/welcome/). La plupart de ces services sont fondés sur l'abonnement, à l'exception notable de [Google Fonts](https://www.google.com/fonts), un service gratuit utile, en particulier pour les tests rapides et la rédaction de démos. @@ -144,7 +144,7 @@ La plupart de ces services sont faciles à utiliser, donc nous n'en parlerons pa 1. Allez sur [Google Fonts](https://www.google.com/fonts). 2. Utilisez les filtres sur la droite pour afficher les types de polices à choisir et retenez une paire de fontes qui vous plaisent. 3. Pour sélectionner une famille de fontes, pressez le bouton ⊕ sur le côté. -4. Après avoir choisi les familles de fontes, pressez la barre avec _\[Nombre] Families Selected_ en bas de la page. +4. Après avoir choisi les familles de fontes, pressez la barre avec _\[Nombre] Families Selected_ en bas de la page. 5. Dans l'écran résultant, copiez d'abord la ligne de code HTML affichée et collez‑la dans l'en-tête de votre fichier HTML. Mettez-la au-dessus de l'élément {{htmlelement("link")}} existant, de sorte que la police soit importée avant que le navigateur essaye de l'utiliser dans la CSS. 6. Copiez ensuite les déclarations CSS listées dans la CSS comme il convient pour appliquer la fonte personnalisée à votre HTML. @@ -152,7 +152,7 @@ La plupart de ces services sont faciles à utiliser, donc nous n'en parlerons pa ## @font-face plus en détail -Examinons la syntaxe générée par fontsquirrel pour `@font-face`. C'est un bloc de ce type : +Examinons la syntaxe générée par fontsquirrel pour `@font-face`. C'est un bloc de ce type : ```css @font-face { @@ -168,17 +168,17 @@ Examinons la syntaxe générée par fontsquirrel pour `@font-face`. C'est un bl } ``` -Elle est désignée sous le vocable « bulletproof @font-face syntax » (_syntaxe @font-face à puces garanties_), d'après un post de Paul Irish lors des débuts des succès de `@font-face` ([Bulletproof @font-face Syntax](http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/)). Voyons les actions : +Elle est désignée sous le vocable « bulletproof @font-face syntax » (_syntaxe @font-face à puces garanties_), d'après un post de Paul Irish lors des débuts des succès de `@font-face` ([Bulletproof @font-face Syntax](http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/)). Voyons les actions : -- `font-family` : cette ligne précise la référence à la police. Vous pouvez mettre cette assertion comme bon vous semble, pour autant que ce soit utilisé de manière cohérent dans la CSS. +- `font-family` : cette ligne précise la référence à la police. Vous pouvez mettre cette assertion comme bon vous semble, pour autant que ce soit utilisé de manière cohérent dans la CSS. - `src` : ces lignes indiquent les chemins vers les fichiers de fontes à importer dans la CSS (la partie `url`) et le format de chaque fichier de fonte (la partie `format`). Cette dernière partie est dans chaque cas optionnelle, mais il est utile de la déclarer car elle permet aux navigateurs de trouver la police à utiliser plus rapidement. Plusieurs déclarations peuvent être mises dans la liste, séparées par des virgules — le navigateur cherchera parmi celles-ci et utilisera la première trouvée qu'il comprend — toutefois il est préférable de mettre en tête les formats nouveaux comme WOFF2 et le plus anciens comme TTF en fin de liste. Les fontes EOT font exception — elles seront placées en tête pour corriger une paire de bogues dans les anciennes versions de IE, car IE essayera d'utiliser la première trouvée même s'il est en fait incapable de l'utiliser. -- {{cssxref("font-weight")}}/{{cssxref("font-style")}} : ces lignes définissent la graisse de la police, si elle est italique ou pas. Si vous importez plusieurs graisses d'une même police, vous pouvez indiquer quelles sont ses caractéristiques et utiliser diverses valeurs de {{cssxref("font-weight")}}/{{cssxref("font-style")}} pour faire votre choix au lieu d'appeler de noms différents les membres de la même famille. [@font-face tip: define font-weight and font-style to keep your CSS simple](http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/) (_en anglais — Astuces pour @font-face : définir la graisse et le style des fontes pour avoir des CSS simples_) par Roger Johansson montre que faire plus en détail. +- {{cssxref("font-weight")}}/{{cssxref("font-style")}} : ces lignes définissent la graisse de la police, si elle est italique ou pas. Si vous importez plusieurs graisses d'une même police, vous pouvez indiquer quelles sont ses caractéristiques et utiliser diverses valeurs de {{cssxref("font-weight")}}/{{cssxref("font-style")}} pour faire votre choix au lieu d'appeler de noms différents les membres de la même famille. [@font-face tip: define font-weight and font-style to keep your CSS simple](http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/) (_en anglais — Astuces pour @font-face : définir la graisse et le style des fontes pour avoir des CSS simples_) par Roger Johansson montre que faire plus en détail. -> **Note :** Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}} : c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) (_Création de piles de fontes personnalisées en définissant des plages unicode_) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété. +> **Note :** Vous pouvez aussi définir des valeurs particulières de {{cssxref("font-variant")}} et {{cssxref("font-stretch")}} pour vos polices. Dans les navigateurs les plus récents, vous pouvez également indiquer une valeur pour {{cssxref("unicode-range")}} : c'est la plage des codes caractères dont l'utilisation est prévue — dans les navigateurs prenant en charge cette propriété, seuls les caractères indiqués seront téléchargés, ce qui réduit les volumes téléchargés non nécessaires. [Creating Custom Font Stacks with Unicode-Range](https://24ways.org/2011/creating-custom-font-stacks-with-unicode-range/) (_Création de piles de fontes personnalisées en définissant des plages unicode_) de Drew McLellan donne quelques indications utiles pour l'utilisation de cette propriété. ## Résumé -Maintenant que vous avez travaillé nos articles sur les principes fondamentaux pour composer du texte, il est temps de tester votre compréhension de la chose avec notre évaluation pour le module : composition d'une page d'accueil d'une école communale. +Maintenant que vous avez travaillé nos articles sur les principes fondamentaux pour composer du texte, il est temps de tester votre compréhension de la chose avec notre évaluation pour le module : composition d'une page d'accueil d'une école communale. {{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}} |