From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/font-style/index.md | 199 +++++++++++++++-------------------- 1 file changed, 87 insertions(+), 112 deletions(-) (limited to 'files/fr/web/css/font-style') diff --git a/files/fr/web/css/font-style/index.md b/files/fr/web/css/font-style/index.md index 69952fea4f..4978704f10 100644 --- a/files/fr/web/css/font-style/index.md +++ b/files/fr/web/css/font-style/index.md @@ -7,19 +7,20 @@ tags: - Reference translation_of: Web/CSS/font-style --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété font-style permet de sélectionner une fonte italique (italic) ou (oblique) parmi celles listées par {{cssxref("font-family")}}.

+La propriété** `font-style`** permet de sélectionner une fonte italique (`italic`) ou (`oblique`) parmi celles listées par {{cssxref("font-family")}}. -
{{EmbedInteractiveExample("pages/css/font-style.html")}}
+{{EmbedInteractiveExample("pages/css/font-style.html")}} -

La forme italique est généralement une forme cursive qui utilise moins d'espace horizontal que les autres formes classiques. La forme oblique quant à elle est simplement une version penchée de la forme normale. Les formes italique et oblique peuvent être synthétisées par le navigateur si elles sont absente (le moteur penche alors les glyphes de la forme normale), pour plus d'informations sur l'activation de cette synthèse, voir la propriété {{cssxref("font-synthesis")}}.

+La forme **italique** est généralement une forme cursive qui utilise moins d'espace horizontal que les autres formes classiques. La forme **oblique** quant à elle est simplement une version penchée de la forme normale. Les formes italique et oblique peuvent être synthétisées par le navigateur si elles sont absente (le moteur penche alors les glyphes de la forme normale), pour plus d'informations sur l'activation de cette synthèse, voir la propriété {{cssxref("font-synthesis")}}. -

Syntaxe

+## Syntaxe -

La propriété font-style peut être définie avec l'un des mots-clés suivants.

+La propriété `font-style` peut être définie avec l'un des mots-clés suivants. -
font-style: normal;
+```css
+font-style: normal;
 font-style: italic;
 font-style: oblique;
 font-style: oblique 10deg;
@@ -28,53 +29,53 @@ font-style: oblique 10deg;
 font-style: inherit;
 font-style: initial;
 font-style: unset;
-
+``` -

La propriété font-style s'utilise avec un mot-clé parmi ceux qui suivent. Si ce mot-clé est oblique, il peut également être suivi de l' angle.

+La propriété `font-style` s'utilise avec un mot-clé parmi ceux qui suivent. Si ce mot-clé est `oblique`, il peut également être suivi de l' angle. -

Valeurs

+### Valeurs -
-
normal
-
Sélectionne une police qualifiée de normal parmi celles de {{cssxref("font-family")}}.
-
italic
-
Sélectionne une police qualifiée d'italic, s'il n'y a pas de version italique, une version oblique sera sélectionnée à la place.
-
oblique
-
Sélectionne une police qualifiée d'oblique, s'il n'y a pas de version oblique, une version italic sera sélectionnée à la place.
-
oblique <angle>
-
Sélectionne une police qualifiée d'oblique et indique l'angle à utiliser pour la pente du texte. Si plusieurs fontes sont disponible pour la police, c'est la fonte avec la pente la plus proche qui est utilisée. Si aucune police oblique n'est disponible, le navigateur synthétisera une police penchée en tournant les caractères d'une fonte normale.
- L'angle indiqué (cf. {{cssxref("<angle>")}}) doit être compris entre -90deg et 90deg. Si aucun angle n'est indiqué, la valeur par défaut utilisée sera 14deg. Les valeurs positives correspondent à une pente où le haut des caractères penche vers la fin de la ligne et les valeurs négatives permettent d'obtenir une pente orientée vers le début de la ligne.
-
+- `normal` + - : Sélectionne une police qualifiée de `normal` parmi celles de {{cssxref("font-family")}}. +- `italic` + - : Sélectionne une police qualifiée d'`italic`, s'il n'y a pas de version italique, une version `oblique` sera sélectionnée à la place. +- `oblique` + - : Sélectionne une police qualifiée d'`oblique`, s'il n'y a pas de version oblique, une version `italic` sera sélectionnée à la place. +- `oblique` `` + - : Sélectionne une police qualifiée d'`oblique` et indique l'angle à utiliser pour la pente du texte. Si plusieurs fontes sont disponible pour la police, c'est la fonte avec la pente la plus proche qui est utilisée. Si aucune police oblique n'est disponible, le navigateur _synthétisera_ une police penchée en tournant les caractères d'une fonte normale. + L'angle indiqué (cf. {{cssxref("<angle>")}}) doit être compris entre `-90deg` et `90deg`. Si aucun angle n'est indiqué, la valeur par défaut utilisée sera `14deg`. Les valeurs positives correspondent à une pente où le haut des caractères penche vers la fin de la ligne et les valeurs négatives permettent d'obtenir une pente orientée vers le début de la ligne. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Variable fonts

+### Variable fonts -

Les polices variables permettent d'obtenir un contrôle fin sur la pente appliqué à la fonte. Pour cela, on pourra utiliser une police variable et font-style avec le mot-clé oblique suivi d'une valeur d'angle.

+Les polices variables permettent d'obtenir un contrôle fin sur la pente appliqué à la fonte. Pour cela, on pourra utiliser une police variable et `font-style` avec le mot-clé `oblique` suivi d'une valeur d'angle. -

Pour les polices variables TrueType ou OpenType, c'est l'axe de variation "slnt" qui est utilisé afin d'implémenter les variations de pente. C'est l'axe "ital" qui est utilisé avec une valeur de 1 pour implémenter les fontes italiques. Voir {{cssxref("font-variation-settings")}}.

+Pour les polices variables TrueType ou OpenType, c'est l'axe de variation `"slnt"` qui est utilisé afin d'implémenter les variations de pente. C'est l'axe `"ital"` qui est utilisé avec une valeur de 1 pour implémenter les fontes italiques. Voir {{cssxref("font-variation-settings")}}. -

Afin que l'exemple suivant fonctionne, votre navigateur doit prendre en charge la syntaxe CSS Fonts Level 4 qui permet d'utiliser font-style: oblique suivi d'un angle.

+Afin que l'exemple suivant fonctionne, votre navigateur doit prendre en charge la syntaxe _CSS Fonts Level 4_ qui permet d'utiliser `font-style: oblique` suivi d'un angle. -

{{EmbedLiveSample("Variable_fonts", 1200, 180, "", "", "example-outcome-frame")}}

+{{EmbedLiveSample("Variable_fonts", 1200, 180, "", "", "example-outcome-frame")}} -

HTML

+#### HTML -
<header>
-    <input type="range" id="slant" name="slant" min="-90" max="90" />
-    <label for="slant">Slant</label>
-</header>
-<div class="container">
-    <p class="sample">...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.</p>
-</div>
-
+```html +
+ + +
+
+

...it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.

+
+``` -

CSS

+#### CSS -
/*
-AmstelvarAlpha-VF is created by David Berlow (https://github.com/TypeNetwork/Amstelvar)
+```css
+/*
+AmstelvarAlpha-VF is created by David Berlow (https://github.com/TypeNetwork/Amstelvar)
 and is used here under the terms of its license:
 https://github.com/TypeNetwork/Amstelvar/blob/master/OFL.txt
 */
@@ -97,10 +98,10 @@ label {
 .sample {
   font: 2rem 'AmstelvarAlpha', sans-serif;
 }
+```
 
-
- - +``` -

JavaScript

+#### JavaScript -
let slantLabel = document.querySelector('label[for="slant"]');
+```js
+let slantLabel = document.querySelector('label[for="slant"]');
 let slantInput = document.querySelector('#slant');
 let sampleText = document.querySelector('.sample');
 
@@ -140,13 +142,14 @@ function update() {
 slantInput.addEventListener('input', update);
 
 update();
-
+``` -

Exemples

+## Exemples -

CSS

+### CSS -
.normal {
+```css
+.normal {
   font-style: normal;
 }
 
@@ -156,72 +159,44 @@ update();
 
 .oblique {
   font-style: oblique;
-}
+} +``` -

HTML

+### HTML -
<p class="normal">Un paragraphe normale.</p>
-<p class="italic">Un paragraphe italique.</p>
-<p class="oblique">Un paragraphe oblique.</p>
-
+```html +

Un paragraphe normale.

+

Un paragraphe italique.

+

Un paragraphe oblique.

+``` -

Résultat

+### Résultat -

{{EmbedLiveSample('Exemples')}}

+{{EmbedLiveSample('Exemples')}} -
-

Note : Toutes les polices ne disposent pas nécessairement de formes pour oblique et italic, si ces formes sont absentes, le moteur simulera la forme absente à partir de celle qui est disponible. Voici un exemple du rendu d'une police qui dispose des différentes formes :

+> **Note :** Toutes les polices ne disposent pas nécessairement de formes pour `oblique` et `italic`, si ces formes sont absentes, le moteur simulera la forme absente à partir de celle qui est disponible. Voici un exemple du rendu d'une police qui dispose des différentes formes : +> +> ![](screen_shot_2015-12-05_at_08.41.03.png) -

-
+## Accessibilité + +L'utilisation de grandes portions de textes avec `font-style: italic` peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs. + +- [Comprendre les règles WCAG 1.4](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.4_make_it_easier_for_users_to_see_and_hear_content_including_separating_foreground_from_background) +- [_Understanding Success Criterion 1.4.8  | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/WCAG21/#visual-presentation) + +## Spécific​ations + +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------- | -------------------------------- | ----------------------------------------------------- | +| {{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}} | {{Spec2('CSS4 Fonts')}} | Permet d'indiquer un angle après le mot-clé `oblique` | +| | | | +| {{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}} | {{Spec2('CSS3 Fonts')}} | Aucune modification. | +| {{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}} | {{Spec2('CSS2.1')}} | Aucune modification. | +| {{SpecName('CSS1', '#font-style', 'font-style')}} | {{Spec2('CSS1')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs -

Accessibilité

- -

L'utilisation de grandes portions de textes avec font-style: italic peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs.

- - - -

Spécific​ations

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS4 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS4 Fonts')}}Permet d'indiquer un angle après le mot-clé oblique
{{SpecName('CSS3 Fonts', '#font-style-prop', 'font-style')}}{{Spec2('CSS3 Fonts')}}Aucune modification.
{{SpecName('CSS2.1', 'fonts.html#propdef-font-style', 'font-style')}}{{Spec2('CSS2.1')}}Aucune modification.
{{SpecName('CSS1', '#font-style', 'font-style')}}{{Spec2('CSS1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.font-style")}}

+{{Compat("css.properties.font-style")}} -- cgit v1.2.3-54-g00ecf