From d596e86a4f13b04981f51d327af257b07e6d21c3 Mon Sep 17 00:00:00 2001 From: SphinxKnight Date: Sun, 14 Nov 2021 14:23:22 +0100 Subject: Prepare Learning Area section for Markdown conversion (#2738) * Remove summary, spans and fonts * Remove notranslate class * Remove ids other than headings * Remove hidden blocks * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * fix livesample call with exclamation mark * Fix notes * Remove code in pre, sub/sup and some styles * fix dls * fix absolute / english links * fix figures and others * fix other issues from report * Fix other one-off issues excl. imgs * Fix images * Fixes #2842 for Learning area --- .../learn/css/styling_text/fundamentals/index.html | 140 +++++++++------------ files/fr/learn/css/styling_text/index.html | 28 ++--- .../css/styling_text/styling_links/index.html | 44 +++---- .../css/styling_text/styling_lists/index.html | 39 +++--- .../styling_text/typesetting_a_homepage/index.html | 10 +- .../fr/learn/css/styling_text/web_fonts/index.html | 20 +-- 6 files changed, 123 insertions(+), 158 deletions(-) (limited to 'files/fr/learn/css/styling_text') diff --git a/files/fr/learn/css/styling_text/fundamentals/index.html b/files/fr/learn/css/styling_text/fundamentals/index.html index c43c2fdd55..1aa02da170 100644 --- a/files/fr/learn/css/styling_text/fundamentals/index.html +++ b/files/fr/learn/css/styling_text/fundamentals/index.html @@ -16,13 +16,13 @@ original_slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte
{{NextMenu("Learn/CSS/Styling_text/Styling_lists", "Learn/CSS/Styling_text")}}
-

Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres.

+

Dans cet article, nous allons commencer le voyage vers la maîtrise des styles du texte avec {{glossary("CSS")}}. Nous passerons en revue les principes de base de mise en forme du texte, y compris la graisse, la famille et le style de police, les codes d'abréviation, l'alignement du texte et autres effets, ainsi que l'espacement des lignes et des lettres.

- +
- + @@ -36,7 +36,7 @@ original_slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte

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

@@ -47,7 +47,7 @@ original_slug: Learn/CSS/Styling_text/initiation-mise-en-forme-du-texte
-

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 (sélectionne la première lettre du texte d'un élément), ::first-line (sélectionne la première ligne du texte d'un élément) ou ::selection (sélectionne le texte actuellement mis en surbrillance par le curseur) .

+

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 (sélectionne la première lettre du texte d'un élément), ::first-line (sélectionne la première ligne du texte d'un élément) ou ::selection (sélectionne le texte actuellement mis en surbrillance par le curseur) .

Fontes

@@ -67,7 +67,7 @@ avait beaucoup d'histoires à raconter. Mais il ne le faisait qu'en de rares occasions, comme maintenant.</p>
-

(NdT : Extrait et traduction approximative de la chanson Tommy the Cat du groupe Primus)

+

Note : (NdT : Extrait et traduction approximative de la chanson Tommy the Cat du groupe Primus)

Vous pouvez trouver l'exemple (en) fini sur Github (voir aussi le code source).

@@ -76,7 +76,7 @@ occasions, comme maintenant.</p>

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, par exemple :

+

color accepte toutes les unités de couleur des CSS, par exemple :

p {
   color: red;
@@ -84,8 +84,7 @@ occasions, comme maintenant.</p>

Les paragraphes seront en rouge, au lieu d'être de couleur noire, couleur par défaut du navigateur standard :

-

{{ EmbedLiveSample('Couleur', '100%', 220) }}

@@ -122,7 +120,7 @@ occasions, comme maintenant.</p> - + @@ -138,12 +136,12 @@ occasions, comme maintenant.</p> - + - + @@ -161,11 +159,11 @@ occasions, comme maintenant.</p>
Prérequis :Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).
Objectif :
NomType génériqueType générique Notes
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.
GeorgiaGeorgia serif  
Times New RomanTimes 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.
-

Note : Le site 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.

+

Note : Le site 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.

-

Note : Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : les polices web. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.

+

Note : Il y a moyen de télécharger une police personnalisée avec une page Web ; cela permet une utilisation personnalisée de la police comme vous le souhaitez : les polices web. C'est un peu plus complexe, et nous en discuterons dans un article séparé plus loin dans le module.

Polices par défaut

@@ -186,27 +184,27 @@ occasions, comme maintenant.</p> serif Les polices qui ont des sérifs (fioritures et autres petits détails que vous voyez en extrémité de trait dans certaines polices) - Mon grand éléphant rouge + Mon grand éléphant rouge sans-serif Les polices qui n'ont pas d'empattements - Mon grand éléphant rouge + Mon grand éléphant rouge monospace Les polices dans lesquelles chaque caractère a la même largeur, généralement utilisées dans les listes de codes. - Mon grand éléphant rouge + Mon grand éléphant rouge cursive Les polices destinées à émuler l'écriture, avec des traits fluides et connectés. - Mon grand éléphant rouge + Mon grand éléphant rouge fantasy Les polices destinées à être décoratives. - Mon grand éléphant rouge + Mon grand éléphant rouge @@ -219,12 +217,12 @@ occasions, comme maintenant.</p> font-family: "Trebuchet MS", Verdana, sans-serif; } -

Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. Si c'est le cas, il applique cette police aux éléments sélectionnés. Sinon, il passe à la police suivante et ainsi de suite.

+

Dans ce cas, le navigateur débute la lecture de la liste et cherche à voir si cette police est disponible sur la machine. Si c'est le cas, il applique cette police aux éléments sélectionnés. Sinon, il passe à la police suivante et ainsi de suite.

Indiquer un nom de police générique approprié en fin de liste est une bonne idée : si aucune des polices listées n'est disponible, le navigateur peut au‑moins fournir quelque chose de convenable. Soulignons ce point : les paragraphes seront rendus avec la police serif par défaut du navigateur si aucune autre option n'est disponible — généralement Time New Roman — mais ce ne sera pas un bon substitut à une police sans-serif !

-

Note : Les noms de police comportant plus d'un mot — comme Trebuchet MS — doivent être entourés de guillemets, par exemple "Trebuchet MS".

+

Note : Les noms de police comportant plus d'un mot — comme Trebuchet MS — doivent être entourés de guillemets, par exemple "Trebuchet MS".

Un exemple de font-family

@@ -238,8 +236,7 @@ occasions, comme maintenant.</p>

Cela donne le résultat suivant :

-

{{ EmbedLiveSample('Un_exemple_de_font-family', '100%', 220) }}

Taille de la police de caractères

-

Dans l'article Valeurs et unités CSS de notre prédédent module, nous avons vu les unités de longueur et taille. La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les pourcentages). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :

+

Dans l'article Valeurs et unités CSS de notre prédédent module, nous avons vu les unités de longueur et taille. La taille des polices de caractères (définie avec la propriété {{cssxref("font-size")}}) accepte la plupart des unités de valeur (et d'autres comme les pourcentages). Toutefois, les unités les plus couramment utilisées pour dimensionner le texte sont :

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.

@@ -281,8 +277,7 @@ occasions, comme maintenant.</p>

Notre nouveau résultat ressemble à :

-
html {
   font-size: 10px;
@@ -325,7 +319,7 @@ p {
  
  
  • {{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):
      -
    • normal, bold : graisse de la police, normale ou bold.
    • +
    • normal, bold : graisse de la police, normale ou bold.
    • lighter, bolder : définit la graisse de l'élément courant de sorte qu'il soit un cran moins gras ou plus gras que son parent.
    • 100–900 : valeurs numériques du taux de graisse ; elles permettent un dosage plus fin que les mots-clés ci-dessus, si nécessaire.
    @@ -333,28 +327,27 @@ p {
  • {{cssxref("text-transform")}} : Vous permet de définir les transformations de votre police. Les valeurs comprennent :
    • none : aucune transformation.
    • -
    • uppercase : met tout le texte en majuscules.
    • +
    • uppercase : met tout le texte en majuscules.
    • lowercase : met tout le texte en minuscules.
    • -
    • capitalize : transforme tous les mots en mettant leur première lettre en majuscules.
    • +
    • capitalize : transforme tous les mots en mettant leur première lettre en majuscules.
    • full-width : force l'écriture de tous les glyphes dans un carré de largeur fixe, similaire à une police à espacement fixe, permettant leur alignement, par ex. caractères latins avec des glyphes de langue asiatique (comme le chinois, le japonais, le coréen.)
  • {{cssxref("text-decoration")}} : active ou désactive les décorations de texte sur les polices (vous les utiliserez principalement pour désactiver le soulignement par défaut sur les liens lors de leur création). Les valeurs disponibles sont :
    • none: désactive les décorations du texte déjà présentes.
    • -
    • underline: souligne le texte.
    • -
    • overline: trace une ligne au-dessus du texte.
    • -
    • line-through: barre le texte.
    • +
    • underline: souligne le texte.
    • +
    • overline: trace une ligne au-dessus du texte.
    • +
    • line-through: barre le texte.
    - Vous devez noter que {{cssxref("text-decoration")}} peut accepter plusieurs valeurs à la fois, si vous voulez en ajouter plusieurs simultanément, par exemple text-decoration: underline overline. Notez aussi que {{cssxref("text-decoration")}} est la propriété raccourcie pour {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("text-decoration-color")}}. Vous pouvez utiliser des combinaisons de ces valeurs de propriété pour créer des effets intéressants, par exemple text-decoration: line-through red wavy.
  • + Vous devez noter que {{cssxref("text-decoration")}} peut accepter plusieurs valeurs à la fois, si vous voulez en ajouter plusieurs simultanément, par exemple text-decoration: underline overline. Notez aussi que {{cssxref("text-decoration")}} est la propriété raccourcie pour {{cssxref("text-decoration-line")}}, {{cssxref("text-decoration-style")}} et {{cssxref("text-decoration-color")}}. Vous pouvez utiliser des combinaisons de ces valeurs de propriété pour créer des effets intéressants, par exemple text-decoration: line-through red wavy.

    Regardons l'ajout de quelques-unes de ces propriétés à notre exemple.

    Notre nouveau résultat ressemble à :

    - -
    html {
    +
     
    -

    une liste ordonnée avec les puces intégrées au texte des éléments de la liste.

    +

    une liste ordonnée avec les puces intégrées au texte des éléments de la liste.

    Utilisation d'une puce image personnalisée

    @@ -179,7 +179,7 @@ dd { list-style-image: url(star.svg); }
    -

    Cependant, cette propriété est un peu limitée en terme de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de {{cssxref ("background")}}, dont vous apprendrez beaucoup plus dans le module Styliser les boîtes. Pour l'instant, voici un avant-goût !

    +

    Cependant, cette propriété est un peu limitée en terme de contrôle de la position, de la taille, etc. des puces. Il vaut mieux utiliser la famille de propriétés de {{cssxref ("background")}}, dont vous apprendrez beaucoup plus dans le module Styliser les boîtes. Pour l'instant, voici un avant-goût !

    Dans notre exemple achevé, nous avons appliqué un style à la liste non ordonnée (en plus de ce que vous avez déjà vu ci-dessus) comme ceci :

    @@ -213,7 +213,7 @@ ul li {

    Ceci nous donne le résultat suivant :

    -

    une liste non ordonnée avec les puces définies comme de petites images d'étoiles.

    +

    une liste non ordonnée avec les puces définies comme de petites images d'étoiles.

    Raccourci de style de liste

    @@ -269,7 +269,7 @@ ul li {

    Valeurs individualisées

    -

    L'attribut {{htmlattrxref("value","ol")}} vous permet de numéroter les éléments de liste avec des valeurs numériques de votre choix . L'exemple suivant :

    +

    L'attribut {{htmlattrxref("value","ol")}} vous permet de numéroter les éléments de liste avec des valeurs numériques de votre choix . L'exemple suivant :

    <ol>
       <li value="2">Faire griller le pain pitta, laisser refroidir, puis le trancher sur le côté.</li>
    @@ -283,7 +283,7 @@ ul li {
     

    {{ EmbedLiveSample('Valeurs_individualisées', '100%', 150) }}

    -

    Note : Même si vous utilisez une propriété {{cssxref ("type-style-list")}}  avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut value.

    +

    Note : Même si vous utilisez une propriété {{cssxref ("type-style-list")}}  avec des caractères non‑numériques, vous devez toujours utiliser les valeurs numériques équivalentes avec l'attribut value.

    Apprentissage actif : définir le style d'une liste imbriquée

    @@ -299,10 +299,7 @@ ul li {

    Si vous faites une erreur, vous pourrez toujours tout remettre à zéro avec le bouton Réinitialiser. Si vous êtes vraiment bloqué, pressez le bouton Voir la solution pour voir une réponse possible.

    - -

    {{ EmbedLiveSample('Playable_code', 700, 800) }}

    +

    {{ EmbedLiveSample("Apprentissage_actif_définir_le_style_d'une_liste_imbriquée", 700, 800) }}

    Voir aussi

    @@ -391,6 +388,6 @@ window.addEventListener("load", drawOutput);
  • Initiation à la mise en forme du texte
  • Style de listes
  • Mise en forme des liens
  • -
  • Polices de caractères web
  • -
  • Composition d'une page d'accueil d'une école communale
  • +
  • Polices de caractères web
  • +
  • Composition d'une page d'accueil d'une école communale
  • diff --git a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html index 9cc49e8056..d237b8f377 100644 --- a/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html +++ b/files/fr/learn/css/styling_text/typesetting_a_homepage/index.html @@ -17,9 +17,9 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage
    {{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.

    - +
    @@ -42,7 +42,7 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage
    -

    Note : Autrement, il reste possible d'utiliser un site comme JSBin ou Thimble pour faire votre évaluation. Collez le HTML et remplissez la CSS dans l'un de ces éditeurs en ligne ; utilisez cet URL pour pointer sur l'image de fond. Si l'éditeur en ligne que vous utilisez n'a pas de panneau CSS séparé, vous pouvez l'intégrer dans un élément <style> de l'élément head du document.

    +

    Note : Autrement, il reste possible d'utiliser un site comme JSBin ou Thimble pour faire votre évaluation. Collez le HTML et remplissez la CSS dans l'un de ces éditeurs en ligne ; utilisez cet URL pour pointer sur l'image de fond. Si l'éditeur en ligne que vous utilisez n'a pas de panneau CSS séparé, vous pouvez l'intégrer dans un élément <style> de l'élément head du document.

    Énoncé de l'exercice

    @@ -103,7 +103,7 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage

    La capture d'écran ci-après montre un exemple possible du design terminé :

    -

    +

    Évaluation

    @@ -121,6 +121,6 @@ translation_of: Learn/CSS/Styling_text/Typesetting_a_homepage
  • Initiation à la mise en forme du texte
  • Style de listes
  • Mise en forme des liens
  • -
  • Polices de caractères web
  • +
  • Polices de caractères web
  • Composition d'une page d'accueil d'une école de communauté
  • diff --git a/files/fr/learn/css/styling_text/web_fonts/index.html b/files/fr/learn/css/styling_text/web_fonts/index.html index 64724b25db..f1cafd3f21 100644 --- a/files/fr/learn/css/styling_text/web_fonts/index.html +++ b/files/fr/learn/css/styling_text/web_fonts/index.html @@ -7,13 +7,13 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
    {{PreviousMenuNext("Learn/CSS/Styling_text/Styling_links", "Learn/CSS/Styling_text/Typesetting_a_homepage", "Learn/CSS/Styling_text")}}
    -

    Dans le premier article du module, nous avons exploré les fonctions CSS de base disponibles pour composer du texte. Dans cet article, nous allons plus loin et explorons les polices web en détail : comment télécharger des polices personnalisées en même temps que la page Web, pour donner un style plus varié et personnalisé au texte.

    +

    Dans le premier article du module, nous avons exploré les fonctions CSS de base disponibles pour composer du texte. Dans cet article, nous allons plus loin et explorons les polices web en détail : comment télécharger des polices personnalisées en même temps que la page Web, pour donner un style plus varié et personnalisé au texte.

    -
    Prérequis :
    +
    - + @@ -61,7 +61,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
    -

    Note : La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 !

    +

    Note : La technique des polices Web est prise en charge dans Internet Explorer depuis sa version 4 !

    Apprentissage actif : un exemple de fonte web

    @@ -87,7 +87,7 @@ translation_of: Learn/CSS/Styling_text/Web_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

    @@ -127,10 +127,10 @@ translation_of: Learn/CSS/Styling_text/Web_fonts

    Vous devriez obtenir une page de démonstration avec les belles polices implémentées ci‑dessus. Comme les diverses polices sont créées en différentes tailles, il se peut que vous deviez ajuster la taille, l'espacement, etc. pour parfaire l'aspect.

    -

    +

    -

    Note : Si vous avez des problèmes pour faire fonctionner votre travail, n'hésitez pas à comparer votre version à nos fichiers finis — voyez web-font-finished.html et web-font-finished.css (lancez l'exemple terminé directement).

    +

    Note : Si vous avez des problèmes pour faire fonctionner votre travail, n'hésitez pas à comparer votre version à nos fichiers finis — voyez web-font-finished.html et web-font-finished.css (lancez l'exemple terminé directement).

    Utiliser un service de polices en ligne

    @@ -151,7 +151,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
    -

    Note : Vous pourrez trouver une version complétée sur google-font.html et google-font.css, si vous avez besoin de vérifier votre travail par rapport au nôtre (voir en direct).

    +

    Note : Vous pourrez trouver une version complétée sur google-font.html et google-font.css, si vous avez besoin de vérifier votre travail par rapport au nôtre (voir en direct).

    @font-face plus en détail

    @@ -179,7 +179,7 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
    -

    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 (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 (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é

    @@ -199,5 +199,5 @@ translation_of: Learn/CSS/Styling_text/Web_fonts
  • Style de listes
  • Mise en forme des liens
  • Polices de caractères web
  • -
  • Composition d'une page d'accueil d'une école de communauté
  • +
  • Composition d'une page d'accueil d'une école de communauté
  • -- cgit v1.2.3-54-g00ecf
    Prérequis :Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).Connaissances informatiques de base, les bases HTML (étudiées dans l'Introduction au HTML), les bases CSS (étudiées dans Introduction à CSS).
    Objectif :