diff options
author | julieng <julien.gattelier@gmail.com> | 2021-09-17 20:59:20 +0200 |
---|---|---|
committer | SphinxKnight <SphinxKnight@users.noreply.github.com> | 2021-10-12 07:57:33 +0200 |
commit | 258ba7b4be62d8640477a3bd3146d08b00cb70ec (patch) | |
tree | a8476eee4c369ff47bdfe08353774414f2281ba3 /files/fr/web/css/font-variant-caps | |
parent | 149319bb8c7b1394a443f0877c3460cd362aa815 (diff) | |
download | translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.gz translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.tar.bz2 translated-content-258ba7b4be62d8640477a3bd3146d08b00cb70ec.zip |
convert content to md
Diffstat (limited to 'files/fr/web/css/font-variant-caps')
-rw-r--r-- | files/fr/web/css/font-variant-caps/index.md | 135 |
1 files changed, 60 insertions, 75 deletions
diff --git a/files/fr/web/css/font-variant-caps/index.md b/files/fr/web/css/font-variant-caps/index.md index f182b3f024..7ad73cdda8 100644 --- a/files/fr/web/css/font-variant-caps/index.md +++ b/files/fr/web/css/font-variant-caps/index.md @@ -8,29 +8,28 @@ tags: - Reference translation_of: Web/CSS/font-variant-caps --- -<div>{{CSSRef}}</div> +{{CSSRef}} -<p>La propriété <strong><code>font-variant-caps</code></strong> permet de contrôler les glyphes utilisés pour représenter les lettres en capitales. Les scripts peuvent avoir différents glyphes de différentes tailles pour les différentes représentations des capitales et cette propriété permet de choisir une de ces formes.</p> +La propriété **`font-variant-caps`** permet de contrôler les glyphes utilisés pour représenter les lettres en capitales. Les scripts peuvent avoir différents glyphes de différentes tailles pour les différentes représentations des capitales et cette propriété permet de choisir une de ces formes. -<div>{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}}</div> +{{EmbedInteractiveExample("pages/css/font-variant-caps.html")}} -<p>Quand une fonte inclut des glyphes de lettres capitales avec différents corps (taille), cette propriété sélectionne la plus appropriée. Si les très petites capitales ne sont pas toutes présentes pour cette fonte, ce seront les petites capitales qui seront utilisées. Si celles-ci ne sont pas présentes, le moteur les synthétisera à partir des glyphes des capitales.</p> +Quand une fonte inclut des glyphes de lettres capitales avec différents corps (taille), cette propriété sélectionne la plus appropriée. Si les très petites capitales ne sont pas toutes présentes pour cette fonte, ce seront les petites capitales qui seront utilisées. Si celles-ci ne sont pas présentes, le moteur les synthétisera à partir des glyphes des capitales. -<p>Certains caractères sans casse (comme les caractères de ponctuation) peuvent être représentés avec différents glyphes afin de mieux les représenter avec les caractères environnants. Les caractères sans casse ne sont pas synthétisés par le navigateur s'il n'y a pas de petite capitales.</p> +Certains caractères sans casse (comme les caractères de ponctuation) peuvent être représentés avec différents glyphes afin de mieux les représenter avec les caractères environnants. Les caractères sans casse ne sont pas synthétisés par le navigateur s'il n'y a pas de petite capitales. -<h3 id="Règles_spécifiques_aux_langues">Règles spécifiques aux langues</h3> +### Règles spécifiques aux langues -<p>Les règles liées à chaque langue/locale sont prises en compte avec les valeurs. Par exemple :</p> +Les règles liées à chaque langue/locale sont prises en compte avec les valeurs. Par exemple : -<ul> - <li>Pour les langues turques comme le turc (tr), l'azerbaidjanais (az), le tatare de Crimée (crh), le tatare de Volga et le Bashkir (ba), il y a deux types de i : avec ou sans le point et deux majuscules correspondantes <code>i</code>/<code>İ</code> et <code>ı</code>/<code>I</code>.</li> - <li>En allemand (de), le caractère <code>ß</code> devient <code>ẞ</code> (U+1E9E) en majuscule.</li> - <li>En grec (el), les voyelles perdent leur accent en majuscule lorsque tout le mot est en majuscule (<code>ά</code>/<code>Α</code>), sauf pour le êta disjonctif (<code>ή</code>/<code>Ή</code>). Les diphthongues avec un accent sur la première voyellle perdent l'accent et ajoutent une diacritique sur la deuxième voyelle (<code>άι</code>/<code>ΑΪ</code>).</li> -</ul> +- Pour les langues turques comme le turc (tr), l'azerbaidjanais (az), le tatare de Crimée (crh), le tatare de Volga et le Bashkir (ba), il y a deux types de i : avec ou sans le point et deux majuscules correspondantes `i`/`İ` et `ı`/`I`. +- En allemand (de), le caractère `ß` devient `ẞ` (U+1E9E) en majuscule. +- En grec (el), les voyelles perdent leur accent en majuscule lorsque tout le mot est en majuscule (`ά`/`Α`), sauf pour le êta disjonctif (`ή`/`Ή`). Les diphthongues avec un accent sur la première voyellle perdent l'accent et ajoutent une diacritique sur la deuxième voyelle (`άι`/`ΑΪ`). -<h2 id="Syntaxe">Syntaxe</h2> +## Syntaxe -<pre class="brush:css">/* Valeurs avec un mot-clé */ +```css +/* Valeurs avec un mot-clé */ font-variant-caps: normal; font-variant-caps: small-caps; font-variant-caps: all-small-caps; @@ -43,86 +42,72 @@ font-variant-caps: titling-caps; font-variant-caps: inherit; font-variant-caps: initial; font-variant-caps: unset; -</pre> - -<p>La valeur de cette propriété peut être l'un des mots-clés définis ci-après.</p> - -<h3 id="Valeurs">Valeurs</h3> - -<dl> - <dt><code>normal</code></dt> - <dd>Ce mot-clé désactive l'utilisation des glyphes alternatifs.</dd> - <dt><code>small-caps</code></dt> - <dd>Ce mot-clé active l'utilisation de petites capitales pour les minuscules. Il correspond à la valeur OpenType <code>smcp</code> ; si la fonte ne supporte pas cette option, le moteur synthétisera les glyphes.</dd> - <dt><code>all-small-caps</code></dt> - <dd>Ce mot-clé active l'utilisation de petites capitales pour les minuscules. Il correspond aux valeurs OpenType <code>smcp</code> et <code>c2sc</code> ; si la fonte ne supporte pas cette option, le moteur synthétisera les glyphes.</dd> - <dt><code>petite-caps</code></dt> - <dd>Ce mot-clé active l'utilisation de toutes petites capitales pour les minuscules. Il correspond à la valeur OpenType <code>pcap</code> ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales.</dd> - <dt><code>all-petite-caps</code></dt> - <dd>Ce mot-clé active l'utilisation de toutes petites capitales pour les minuscules. Il correspond aux valeurs OpenType <code>pcap </code>et <code>c2pc</code> ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales.</dd> - <dt><code>unicase</code></dt> - <dd>Ce mot-clé active l'utilisation de petites capitales pour les majuscules. Il correspond à la valeur OpenType <code>unic</code>.</dd> - <dt><code>titling-caps</code></dt> - <dd>Ce mot-clé active l'utilisation de capitales spéciales pour les titres (à la fois pour les minuscules et majuscules). Généralement, les glyphes majuscules sont conçus pour utiliser les glyphes minuscules et ils apparaissent trop gras quand il y a un long fragment de texte utilisant de tels glyphes. L'objectif de ces glyphes spéciaux est d'éviter un tel effet. Ce mot-clé correspond à la valeur OpenType <code>titl</code> ; si la fonte ne supporte pas ce cas, le mot-clé n'aura pas d'action visible.</dd> -</dl> - -<h3 id="Syntaxe_formelle">Syntaxe formelle</h3> +``` + +La valeur de cette propriété peut être l'un des mots-clés définis ci-après. + +### Valeurs + +- `normal` + - : Ce mot-clé désactive l'utilisation des glyphes alternatifs. +- `small-caps` + - : Ce mot-clé active l'utilisation de petites capitales pour les minuscules. Il correspond à la valeur OpenType `smcp` ; si la fonte ne supporte pas cette option, le moteur synthétisera les glyphes. +- `all-small-caps` + - : Ce mot-clé active l'utilisation de petites capitales pour les minuscules. Il correspond aux valeurs OpenType `smcp` et `c2sc` ; si la fonte ne supporte pas cette option, le moteur synthétisera les glyphes. +- `petite-caps` + - : Ce mot-clé active l'utilisation de toutes petites capitales pour les minuscules. Il correspond à la valeur OpenType `pcap` ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales. +- `all-petite-caps` + - : Ce mot-clé active l'utilisation de toutes petites capitales pour les minuscules. Il correspond aux valeurs OpenType `pcap `et `c2pc` ; si la fonte ne supporte pas cette option, le moteur utilisera les petites capitales. +- `unicase` + - : Ce mot-clé active l'utilisation de petites capitales pour les majuscules. Il correspond à la valeur OpenType `unic`. +- `titling-caps` + - : Ce mot-clé active l'utilisation de capitales spéciales pour les titres (à la fois pour les minuscules et majuscules). Généralement, les glyphes majuscules sont conçus pour utiliser les glyphes minuscules et ils apparaissent trop gras quand il y a un long fragment de texte utilisant de tels glyphes. L'objectif de ces glyphes spéciaux est d'éviter un tel effet. Ce mot-clé correspond à la valeur OpenType `titl` ; si la fonte ne supporte pas ce cas, le mot-clé n'aura pas d'action visible. + +### Syntaxe formelle {{csssyntax}} -<h2 id="Exemples">Exemples</h2> +## Exemples -<h3 id="CSS">CSS</h3> +### CSS -<pre class="brush:css">.exemple { +```css +.exemple { font-variant-caps: small-caps; -}</pre> +} +``` -<h3 id="HTML">HTML</h3> +### HTML -<pre class="brush: html"><p> +```html +<p> La Reine devint pourpre de colère et après l’avoir considérée un moment avec des yeux flamboyants comme ceux d’une bête fauve, elle se mit à crier : - « <span class="exemple">Qu’on lui coupe la tête !</span> » -</p> -</pre> + « <span class="exemple">Qu’on lui coupe la tête !</span> » +</p> +``` -<h3 id="Résultat">Résultat</h3> +### Résultat -<p>{{EmbedLiveSample("Exemples")}}</p> +{{EmbedLiveSample("Exemples")}} -<h2 id="Accessibilité">Accessibilité</h2> +## Accessibilité -<p>L'utilisation de grandes portions de textes avec <code>font-style: all-small-caps</code> ou <code>font-style: all-petite-caps</code> peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs.</p> +L'utilisation de grandes portions de textes avec `font-style: all-small-caps` ou `font-style: all-petite-caps` peut rendre la lecture difficile pour les personnes dyslexiques ou ayant des troubles cognitifs. -<ul> - <li><a href="/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">Comprendre les règles WCAG 1.4</a></li> - <li><a href="https://www.w3.org/TR/WCAG21/#visual-presentation"><em>W3C Understanding WCAG 2.1 </em>(en anglais)</a></li> -</ul> +- [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) +- [_W3C Understanding WCAG 2.1_ (en anglais)](https://www.w3.org/TR/WCAG21/#visual-presentation) -<h2 id="Spécifications">Spécifications</h2> +## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">État</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td>{{SpecName('CSS3 Fonts', '#propdef-font-variant-caps', 'font-variant-caps')}}</td> - <td>{{Spec2('CSS3 Fonts')}}</td> - <td>Définition initiale.</td> - </tr> - </tbody> -</table> +| Spécification | État | Commentaires | +| -------------------------------------------------------------------------------------------------------- | -------------------------------- | -------------------- | +| {{SpecName('CSS3 Fonts', '#propdef-font-variant-caps', 'font-variant-caps')}} | {{Spec2('CSS3 Fonts')}} | Définition initiale. | -<p>{{cssinfo}}</p> +{{cssinfo}} -<h2 id="Compatibilité_des_navigateurs">Compatibilité des navigateurs</h2> +## Compatibilité des navigateurs -<p>{{Compat("css.properties.font-variant-caps")}}</p> +{{Compat("css.properties.font-variant-caps")}} |