CSS
Typographie

Syntaxe

• font: [ font-style ] [font-variant] [font-weight] font-size [/ line-height] font-family ;
• style de police : style de police
• variante de police : variante de police
• poids de la police : poids de la police ;
• taille de la police : taille de la police ;
• line-height: hauteur de la ligne ;
• font-family: font-family ;
• couleur: couleur ;
• quotes: none | string | initial | inherit ;
• font-stretch: font-stretch ;
• text-align: text-align ;
• text-indent: length | initial | inherit ;
• text-overflow: clip | ellipsis | string | initial | inherit ;
• text-transform: none | majuscule | majuscule | minuscule | initial |
• text-shadow: h-ombre v-shadow blur-radius couleur | none | initial | hérite ;
• font-size-adjust: number | none | initial | inherit;
• font-stretch: ultra-condensé | extra-condensé | condensé | semi-condensé | normal | semi-étendu | développé | extra-étendu | ultra-étendu | initial | hérité;
• traits d'union: aucun | manuel | auto ;
• tab-size: nombre | length | initial | inherit ;
• interligne: normal | length | initial | inherit ;
• espacement des mots: normal | length | initial | inherit ;

Paramètres

Remarques

Taille de police

HTML:

<div id="element-one">Hello I am some text.</div>
<div id="element-two">Hello I am some smaller text.</div>

CSS:

#element-one {
    font-size: 30px;   
}

#element-two {
    font-size: 10px;
}

Le texte à l'intérieur de #element-one aura une taille de 30px , tandis que le texte dans #element-two aura une taille de 10px .

La sténographie de la police

Avec la syntaxe:

element {
    font: [font-style] [font-variant] [font-weight] [font-size/line-height] [font-family];
}

Vous pouvez avoir tous les styles liés aux polices dans une seule déclaration avec le raccourci de font . Utilisez simplement la propriété font et mettez vos valeurs dans le bon ordre.

Par exemple, pour que tous les éléments p soient en gras avec une taille de police de 20 pixels et que vous utilisiez Arial comme famille de polices, vous devez le coder comme suit:

p {
    font-weight: bold;
    font-size: 20px;
    font-family: Arial, sans-serif;
}

Cependant, avec le raccourci de police, il peut être condensé comme suit:

p {
    font: bold 20px Arial, sans-serif;
}

Remarque : étant donné que font-style , font-variant , font-weight et line-height sont facultatifs, ils sont tous trois ignorés dans cet exemple. Il est important de noter que l'utilisation du raccourci réinitialise les autres attributs non fournis. Un autre point important est que les deux attributs nécessaires au raccourci de police pour travailler sont font-size font-family et font-family . S'ils ne sont pas tous les deux inclus, le raccourci est ignoré.

Valeur initiale pour chacune des propriétés:

• font-style: normal;
• font-variant: normal;
• font-weight: normal;
• font-stretch: normal;
• font-size: medium;
• line-height: normal;
• font-family - dépend de l'agent utilisateur

Piles de polices

font-family: 'Segoe UI', Tahoma, sans-serif;

Le navigateur tentera d'appliquer la police "Segoe UI" aux caractères des éléments ciblés par la propriété ci-dessus. Si cette police n'est pas disponible ou si la police ne contient pas de glyphe pour le caractère requis, le navigateur utilisera Tahoma et, si nécessaire, toute police sans empattement sur l'ordinateur de l'utilisateur. Notez que tous les noms de police comportant plusieurs mots, tels que "Segoe UI", doivent contenir des guillemets simples ou doubles.

font-family: Consolas, 'Courier New', monospace;

Le navigateur tentera d'appliquer la police "Consolas" aux caractères des éléments ciblés par la propriété ci-dessus. Si cette police n'est pas disponible ou si la police ne contient pas de glyphe pour le caractère requis, le navigateur utilisera "Courier New" et, si nécessaire, toute police monospace sur l'ordinateur de l'utilisateur.

L'espacement des lettres

h2 {
  /* adds a 1px space horizontally between each letter;
     also known as tracking */
  letter-spacing: 1px;
}

La propriété d'espacement des lettres permet de spécifier l'espace entre les caractères d'un texte.

! l'espacement des lettres prend également en charge les valeurs négatives:

p {
  letter-spacing: -1px;
}

Ressources: https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing

Transformation de texte

La propriété text-transform vous permet de modifier la capitalisation du texte. Les valeurs valides sont les suivantes: uppercase , capitalize , lowercase , initial , inherit et none

CSS:

.example1 {
    text-transform: uppercase;
}
.example2 {
    text-transform: capitalize;
}
.example3 {
    text-transform: lowercase;
}

HTML

<p class="example1">
    all letters in uppercase  <!-- "ALL LETTERS IN UPPERCASE" -->
</p>
<p class="example2">
    all letters in capitalize <!-- "All Letters In Capitalize (Sentence Case)" -->
</p>
<p class="example3">
    all letters in lowercase  <!-- "all letters in lowercase" -->
</p>

Retrait du texte

p {
    text-indent: 50px;
}

La propriété text-indent spécifie la quantité de texte d'espace horizontal à déplacer avant le début de la première ligne du contenu textuel d'un élément.

Ressources:

• En retrait de la première ligne de texte d'un paragraphe?
• https://www.w3.org/TR/CSS21/text.html#propdef-text-indent
• https://developer.mozilla.org/en-US/docs/Web/CSS/text-indent

Décoration de texte

La propriété text-decoration permet de définir ou de supprimer des décorations du texte.

h1 { text-decoration: none; }
h2 { text-decoration: overline; }
h3 { text-decoration: line-through; }
h4 { text-decoration: underline; }

la décoration de texte peut être utilisée en combinaison avec le style de décoration de texte et la couleur de décoration de texte:

.title { text-decoration: underline dotted blue; }

Ceci est une version abrégée de

.title {
  text-decoration-style: dotted;
  text-decoration-line: underline;
  text-decoration-color: blue;
}

Il convient de noter que les propriétés suivantes sont uniquement prises en charge dans Firefox

• texte-décoration-couleur
• ligne de décoration de texte
• style de décoration de texte
• texte-décoration-sauter

Dépassement de texte

La propriété text-overflow traite de la manière dont le contenu débordé doit être signalé aux utilisateurs. Dans cet exemple, les ellipsis représentent le texte tronqué.

.text {
  overflow: hidden;
  text-overflow: ellipsis;
}

Malheureusement, text-overflow: ellipsis ne fonctionnent que sur une seule ligne de texte. Il n'y a aucun moyen de prendre en charge les points de suspension sur la dernière ligne des CSS standard, mais cela peut être réalisé avec une implémentation non standard de webbox uniquement pour les flexbox.

.giveMeEllipsis {
   overflow: hidden;
   text-overflow: ellipsis;
   display: -webkit-box;
   -webkit-box-orient: vertical;
   -webkit-line-clamp: N; /* number of lines to show */
   line-height: X;        /* fallback */
   max-height: X*N;       /* fallback */
}

Exemple (ouvert dans Chrome ou Safari):

http://jsfiddle.net/csYjC/1131/

Ressources:

https://www.w3.org/TR/2012/WD-css3-ui-20120117/#text-overflow0

Espacement des mots

La propriété d'espacement des mots spécifie le comportement d'espacement entre les balises et les mots.

Valeurs possibles

• une longueur positive ou négative (en utilisant em px vh cm etc.) ou un pourcentage (en utilisant % )
• le mot clé normal utilise l'espacement des mots par défaut de la police
• le mot clé inherit prend la valeur de l'élément parent

CSS

.normal    { word-spacing: normal; }
.narrow    { word-spacing: -3px; }
.extensive { word-spacing: 10px; }

HTML

<p>
  <span class="normal">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="narrow">This is an example, showing the effect of "word-spacing".</span><br>
  <span class="extensive">This is an example, showing the effect of "word-spacing".</span><br>
</p>

Démo en ligne

Essayez vous-même

Lectures complémentaires:

• espacement des mots - MDN
• espacement des mots - w3.org

Direction du texte

div {
    direction: ltr; /* Default, text read read from left-to-right */
}
.ex {
    direction: rtl; /* text read from right-to-left */
}
.horizontal-tb {
    writing-mode: horizontal-tb; /* Default, text read from left-to-right and top-to-bottom. */
}
.vertical-rtl {
    writing-mode: vertical-rl; /* text read from right-to-left and top-to-bottom */
}
.vertical-ltr {
    writing-mode: vertical-rl; /* text read from left-to-right and top to bottom */
}

La propriété direction est utilisée pour modifier la direction du texte horizontal d'un élément.

Syntaxe: direction: ltr | rtl | initial | inherit;

La propriété du writing-mode modifie l'alignement du texte afin qu'il puisse être lu de haut en bas ou de gauche à droite, selon la langue.

Syntaxe: direction: horizontal-tb | vertical-rl | vertical-lr;

Variante de police

Les attributs:

Ordinaire

Attribut par défaut des polices.

en minuscule

Définit chaque lettre en majuscule, mais rend les lettres minuscules (à partir du texte original) plus petites que les lettres en majuscules.

CSS:

.smallcaps{
   font-variant: small-caps;
}

HTML:

<p class="smallcaps">
    Documentation about CSS Fonts
    <br>
    aNd ExAmpLe
</p>

OUPUT:

Remarque: La propriété font-variant est un raccourci pour les propriétés: font-variant-caps, font-variant-numeric, font-variant-alternates, font-variant-ligatures et font-variant-east-asian.

Citations

La propriété quotes permet de personnaliser les guillemets d'ouverture et de fermeture de la <q> .

q {
    quotes: "«" "»";
}

Ombre de texte

Pour ajouter des ombres au texte, utilisez la propriété text-shadow . La syntaxe est la suivante:

text-shadow: horizontal-offset vertical-offset blur color;

Ombre sans rayon de flou

h1 {
  text-shadow: 2px 2px #0000FF;
}

Cela crée un effet d'ombre bleue autour d'un titre

Ombre avec rayon de flou

Pour ajouter un effet de flou, ajoutez une option d'argument de blur radius

h1 {
  text-shadow: 2px 2px 10px #0000FF;
}

Plusieurs ombres

Pour donner à un élément plusieurs ombres, séparez-les par des virgules

h1 {
    text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}