From 39f2114f9797eb51994966c6bb8ff1814c9a4da8 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 12:36:08 +0100 Subject: unslug fr: move --- .../learn/css/styling_text/fundamentals/index.html | 330 +++++++++++++++++++++ 1 file changed, 330 insertions(+) create mode 100644 files/fr/conflicting/learn/css/styling_text/fundamentals/index.html (limited to 'files/fr/conflicting/learn/css/styling_text/fundamentals') diff --git a/files/fr/conflicting/learn/css/styling_text/fundamentals/index.html b/files/fr/conflicting/learn/css/styling_text/fundamentals/index.html new file mode 100644 index 0000000000..67864f3b97 --- /dev/null +++ b/files/fr/conflicting/learn/css/styling_text/fundamentals/index.html @@ -0,0 +1,330 @@ +--- +title: Mettre en forme du texte +slug: Apprendre/CSS/Comment/Mettre_en_forme_du_texte +tags: + - Apprendre + - CSS + - Débutant +translation_of: Learn/CSS/Styling_text/Fundamentals +translation_of_original: Learn/CSS/Howto/style_text +--- +

La mise en forme du texte est au cœur de CSS. Celui-ci fournit de nombreuses propriétés permettant de modifier l'apparence du texte. En quelque sorte, CSS est le prolongement, sur le Web, de la typographie qui existe depuis plusieurs siècles.

+ +

La mise en forme du texte se décline sur deux composantes : la police et la disposition du texte. Ces deux éléments sont des bases, abordées parmi les premiers concepts qu'on voit en CSS. Toutefois, la mise en forme du texte est plus subtile qu'il n'y paraît. Dans cet article, nous détaillerons les différentes possibilités offertes par CSS. Libre à vous de choisir ce dont vous avez besoin ou ce sur quoi vous souhaitez expérimenter.

+ +

La mise en forme simple

+ +

Les polices de texte peuvent être modifiées et adaptées grâce à ces propriétés CSS :

+ + + +

CSS fournit également des unités dédiées aux polices et des outils pour le texte sélectionné :

+ + + +

Les propriétés les plus fréquemment utilisées peuvent être manipulées grâce à la propriété raccourcie {{cssxref("font")}}. Celle-ci se décompose (dans l'ordre) en : {{cssxref("font-style")}}, {{cssxref("font-variant")}}, {{cssxref("font-weight")}}, {{cssxref("font-stretch")}}, {{cssxref("font-size")}}, {{cssxref("line-height")}}, et {{cssxref("font-family")}}. Parmi toutes ces propriétés, seules font-size et font-family sont obligatoires pour cette notation raccourcie.

+ +

Prenons un exemple pour illustrer ce point.

+ +

Voici le fragment de code HTML qu'on utilisera :

+ +
<p>
+  He dressed himself "all in his best," and at last got out into the streets.
+  The people were by this time pouring forth, as he had seen them with the
+  Ghost of Christmas Present; and walking with his hands behind him, Scrooge
+  regarded every one with a delighted smile. He looked so irresistibly pleasant,
+  in a word, that three or four good-humoured fellows said, "Good morning, sir!
+  A merry Christmas to you!" And Scrooge said often afterwards, that of all the
+  blithe sounds he had ever heard, those were the blithest in his ears.
+</p>
+<p class="fancy">
+  He dressed himself "all in his best," and at last got out into the streets.
+  The people were by this time pouring forth, as he had seen them with the
+  Ghost of Christmas Present; and walking with his hands behind him, Scrooge
+  regarded every one with a delighted smile. He looked so irresistibly pleasant,
+  in a word, that three or four good-humoured fellows said, "Good morning, sir!
+  A merry Christmas to you!" And Scrooge said often afterwards, that of all the
+  blithe sounds he had ever heard, those were the blithest in his ears.
+</p>
+ +

Et voilà la feuille de style CSS qu'on appliquera :

+ +
/* Voici un disposition simple pour que
+   les paragraphes soient côte à côte. */
+p {
+  box-sizing: border-box;
+  width     : 50%;
+  padding   : 1em;
+  float     : left;
+}
+
+.fancy {
+  font: 0.85rem/150% Helvetica, Arial, sans-serif;
+}
+
+.fancy::first-line {
+  font-variant: small-caps;
+}
+
+.fancy::first-letter {
+  font-family: serif;
+  font-size  : 3rem;
+
+  float      : left;
+  background : blanchedalmond;
+  color      : goldenrod;
+  border     : 0.5rem solid gold;
+  padding    : 1rem;
+  margin     : 0 0.5rem 0 0;
+}
+ +

Ces deux éléments permettront d'aboutir au résultat suivant :

+ +

{{EmbedLiveSample('La_mise_en_forme_simple', '100%', '320')}}

+ +
+

Note : Les styles de police vous permettent de faire de nombreuses choses. Toutefois, le Web reste un média principalement basé sur le texte et les polices ont donc leur importance. Nous vous encourageons donc à utiliser les mécanismes offerts par CSS pour améliorer la lisibilité du texte. Pour cela, vous pouvez consulter les différentes règles typographiques recommandées pour le Web.

+
+ +

Paramètres avancées des polices d'écriture

+ +

CSS fournit des propriétés, encore plus avancées, dédiées aux polices d'écriture. Cependant, ces propriétés sont toujours expérimentales et parfois mal supportées par certains navigateurs ou spécifiques à certaines langues (généralement les langues non latines) :

+ + + +

Appliquer des fontes

+ +

Il existe des milliers de polices, quelques unes sont très connues mais on peut s'y perdre rapidement. La typographie, l'art des polices ne sont pas nouveaux, cela dit, le Web apporte son lot de contraintes spécifiques et les fontes ne sont parfois pas aussi adaptées que sur le papier. Voyons ici comment gérer cela.

+ +

La propriété {{cssxref("font-family")}} vous permet de choisir la police de caractères que vous souhaitez appliquer à votre texte. Cette propriété fonctionne avec une valeur qui s'écrit sous la forme d'une liste de noms de polices, chacun séparé par des virgules. Le navigateur parcourera les polices de gauche à droite afin d'utiliser celle qui est disponible sur la machine.

+ +
body {
+  /* Si la police "Open Sans" est disponible, c'est
+     celle-ci qui serait utilisée pour mettre en forme
+     le texte. Sinon, ce sera la police Arial qui sera
+     utilisée et enfin, si Arial n'est pas disponible,
+     ce sera la police sans-serif disponible, par défaut
+     sur le système, qui sera utilisée. */
+  font-family: "Open Sans", Arial, sans-serif;
+}
+ +

Les polices par défaut

+ +

Tout d'abord, CSS définit cinq noms de polices génériques : serif, sans-serif, monospace, cursive, et fantasy. Celles-ci sont choisies par le navigateur selon le système d'exploitation utilisé (il est possible que les différents navigateurs choisissent des polices différentes). C'est en quelque sorte les polices de dernier recours à utiliser. Les polices désignées par serif, sans-serif et monospace devraient être assez prévisibles. En revanche, celles désignées par cursive et fantasy sont moins prévisibles et nous vous conseillons donc de les utiliser avec précaution.

+ +
+

Note : On ne peut jamais être sûr à 100% des polices disponibles sur un ordinateur, aussi, c'est une bonne pratique que de toujours ajouter une police générique en dernier dans la liste des valeurs pour la propriété font-family.

+
+ +

Les polices adaptées au Web

+ +

Les polices génériques sont convenables mais imprévisibles. La plupart du temps, on souhaite mieux contrôler la police qui sera utilisée pour afficher le contenu textuel. On a vu juste avant qu'il était impossible de déterminer à coup sûr les polices disponibles sur un système. Toutefois, on peut s'aider de statistiques pour parier sur différentes polices fréquemment utilisées. Parmi les différents systèmes d'exploitation courants (Windows, Mac, certaines distribution Linux grand public, Android, et iOS), il existe un ensemble de polices largement répandues. Ces polices sont parfois appelées « web fonts » car elles peuvent être utilisées sans trop de risque sur le Web.

+ +

Bien entendu, les systèmes d'exploitation évoluent et la liste des web fonts peut évoluer au cour du temps. Cependant, à l'heure où nous écrivons ces lignes, on peut considérer que les polices suivantes sont largement répandues (notamment grâce à l'initiative Core fonts for the Web de Microsoft à la fin des années 90) :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
NomType génériqueNotes
Arialsans-serifOn considère généralement qu'il est préférable d'ajouter également Helvetica devant Arial. En effet, les polices sont presque identiques et bien qu'Arial soit plus répandue, Helvetica est plus appréciée (en termes de forme).
Courier NewmonospaceCertains systèmes d'exploitation disposent d'une autre version (potentiellement plus ancienne), appelée Courier. C'est une bonne pratique d'utiliser les deux tout en favorisant Courier New dans l'ordre des priorités.
Georgiaserif 
Times New RomanserifCertains systèmes d'exploitation disposent d'une autre version (potentiellement plus ancienne), appelée Times. C'est une bonne pratique d'utiliser les deux tout en favorisant Times New Roman dans l'ordre des priorités.
Trebuchet MSserifAttention, celle-ci n'est pas fortement répandue sur les systèmes d'exploitation mobiles.
Verdanasans-serif 
+ +
+

Note : Parmi les différentes ressources disponibles sur le sujet, cssfontstack.com maintient une liste des web fonts disponibles sur Windows et Mac OS. Cela peut vous aider à décider les polices à utiliser pour votre site.

+
+ +

Les polices personnalisées

+ +

Enfin, si vous souhaitez utiliser votre propre police sur votre site web, la meilleur façon reste d'intégrer cette police dans votre site web.

+ +
+

Attention : les polices sont sujettes au droit d'auteur (copyright) et vous devez donc vérifier, avant de les utiliser, que vous pouvez les intégrer sur votre site. Certains sites vous permettent d'en utiliser certaines gratuitement, comme Google Fonts. D'autres, vous permettent d'acheter le droit d'utiliser certaines polices comme, par exemple, fonts.com.

+
+ +

L'intégration d'une police personnalisée se fait en trois étapes :

+ +
    +
  1. Assurez-vous que la police soit disponible sur votre serveur web. Pour assurer une meilleure rétro-compatibilité, la police doit idéalement être disponible sous quatre format : +
      +
    • WOFF et WOFF2, supportés par les navigateurs modernes (WOFF2 remplacera WOFF)
      • +
    • EOT, supporté par {{Glossary("Microsoft Internet Explorer","Internet Explorer")}} avant sa version 9
      • +
    • SVG, supporté par l'ancienne version de Safari pour iOS (il est peu probable que celle-ci soit encore utilisée)
      • +
    • OTF, supporté par les anciennes versions des navigateurs par défaut Android.
      • +
    +
    2. +
  2. Utilisez la déclaration {{cssxref("@font-face")}} en utilisant les adresses des fichiers et les autres caractéristiques (comme le nom)
    3. +
  3. Utilisez le nom déclaré pour la police personnalisée dans la liste des valeurs fournies à la propriété {{cssxref("font-family")}}.
    4. +
+ +

Voici un exemple d'un telle mise en œuvre.

+ +

On utilisera ce fragment de code HTML :

+ +
<p>
+  He dressed himself "all in his best," and at last
+  got out into the streets. The people were by this
+  time pouring forth, as he had seen them with the
+  Ghost of Christmas Present; and walking with his
+  hands behind him, Scrooge regarded every one with
+  a delighted smile. He looked so irresistibly
+  pleasant, in a word, that three or four good-humoured
+  fellows said, "Good morning, sir! A merry Christmas
+  to you!" And Scrooge said often afterwards, that of
+  all the blithe sounds he had ever heard, those were
+  the blithest in his ears.
+</p>
+<p class="fancy">
+  He dressed himself "all in his best," and at last
+  got out into the streets. The people were by this
+  time pouring forth, as he had seen them with the
+  Ghost of Christmas Present; and walking with his
+  hands behind him, Scrooge regarded every one with
+  a delighted smile. He looked so irresistibly
+  pleasant, in a word, that three or four good-humoured
+  fellows said, "Good morning, sir! A merry Christmas
+  to you!" And Scrooge said often afterwards, that of
+  all the blithe sounds he had ever heard, those were
+  the blithest in his ears.
+</p>
+ +

Et on appliquera cette feuille de style CSS :

+ +
/* Une disposition simple pour voir
+   les paragraphes côte à côte. */
+p {
+  box-sizing: border-box;
+  width     : 50%;
+  padding   : 1em;
+  float     : left;
+}
+
+@font-face {
+  /* Là on définit le nom pour la police
+     personnalisé, on l'utilisera dans la
+     liste */
+  font-family:"Open Sans";
+
+  /* Ici, on liste les fichiers de police,
+     la syntaxe est détaillée ici :
+     http://blog.fontspring.com/2011/02/the-new-bulletproof-font-face-syntax/ */
+  src:url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.a35546eef3ea.eot");
+  src:url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.a35546eef3ea.eot?#iefix") format('embedded-opentype'),
+      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.3f642fa3ea74.woff2") format('woff2'),
+      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.ac327c4db628.woff") format('woff'),
+      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.cd7296352d15.ttf") format('truetype'),
+      url("https://developer.cdn.mozilla.net/static/fonts/OpenSans-Regular-webfont.f641a7d4e80f.svg#OpenSansRegular") format('svg');
+
+  /* Ici, on définit la graisse et le style de la police */
+  font-weight:normal;
+  font-style:normal;
+}
+
+/* Enfin, il suffit simplement d'ajouter la
+   police personnalisée dans la liste des valeurs
+   pour font. */
+.fancy {
+  font: 0.85rem/150% "Open Sans", Helvetica, Arial, sans-serif;
+}
+
+ +

Le résultat obtenu sera :

+ +

{{EmbedLiveSample('Les_polices_personnalisées', '100%', '320')}}

+ +

La disposition du texte

+ +

La disposition du teexte concerne les aspects liés aux sauts de ligne et à la position du texte par rapport à la ligne de base ou par rapport à son contenant.

+ + + +

De la même façon qu'avec la mise en forme du texte, la disposition du texte est concernée par quelques propriétés expérimentales, assez peu supportées par certains navigateurs ou dédiées aux langues non latines. Celles-ci permettent de résoudre plusieurs problèmes d'ordre typographique et il est donc intéressant de les connaître (sans que cela doive devenir une source de préoccupation majeure).

+ + + +

La suite

+ +

Avec tous ces éléments, vous devriez avoir un bon aperçu des outils CSS qui vous permettent de mettre en forme du texte. Nous vous encourageons à tester ces différentes propriétés et à bidouiller avec ces différents concepts pour concrétiser ces notions. Une fois à l'aise avec ces notions, n'hésitez pas à continuer avec un autre sujet : créer de belles boîtes contenant du texte.

-- cgit v1.2.3-54-g00ecf