• Retour sur vos travaux et analyses.
• Polices: Google Fonts et autres

Quelques liens:

• Google Fonts
• Dafont
• use&modify, une sélection de fontes libres par l'artiste Raphaël Bastide
• Font Library, un agrégateur de fontes sous licences libres
• VTF, une fonderie libre
• Font Squirrel, un autre agrégateur de fontes libres

@font-face (exemple)

@font-face {
    font-family: "Swing";
    src: url('/fonts/swing.ttf') format('truetype');
}

Police de caractère (font-family)

Définition de la police : Utilisez la propriété font-family pour spécifier la police de caractère du texte. Vous pouvez définir plusieurs polices comme fallback si la première n'est pas disponible.

p {
  font-family: Arial, sans-serif;
}

Taille de la police (font-size)

Ajustement de la taille : La propriété font-size permet de définir la taille de la police. Vous pouvez utiliser différentes unités de mesure comme px, em, rem, etc.

h1 {
  font-size: 24px;
}

Graisse du texte (font-weight)

Contrôle de l'épaisseur : Utilisez font-weight pour définir le poids de la police, de 100 (très fin) à 900 (très épais).

strong {
  font-weight: bold; /* Ou utilisez des valeurs numériques */
}

Style de police (font-style)

Italic et oblique : font-style permet d'appliquer un style italique ou oblique au texte.

em {
  font-style: italic;
}

Espacement des lettres (letter-spacing)

Ajustement de l'espacement : Contrôlez l'espacement entre les caractères avec letter-spacing.

h2 {
  letter-spacing: 0.5em;
}

Hauteur de ligne (line-height)

Contrôle de l'interligne : La propriété line-height est cruciale pour la lisibilité, en permettant d'ajuster l'espace entre les lignes de texte.

p {
  line-height: 1.6;
}

Alignement du texte (text-align)

Alignement horizontal : Utilisez text-align pour aligner le texte à gauche, à droite, au centre, ou justifié.

p {
  text-align: justify;
}

Décoration du texte (text-decoration)

Soulignement, barré, etc. : Ajoutez des décorations comme le soulignement ou le texte barré avec text-decoration.

a {
  text-decoration: underline;
}

Transformation du texte (text-transform)

Majuscules, minuscules : Transformez le cas des caractères avec text-transform, utile pour les titres ou les boutons.

.uppercase {
  text-transform: uppercase;
}

Ombrage du texte (text-shadow)

Effet d'ombre : Créez des effets d'ombre derrière le texte pour un aspect en relief ou pour améliorer la lisibilité sur des arrière-plans complexes. (des générateurs existent en ligne.. : https://html-css-js.com/css/generator/text-shadow/ )

h1 {
  text-shadow: 2px 2px 4px #000;
}

Direction (direction)

La propriété direction permet de définir la direction du texte. Elle est principalement utilisée pour changer la direction de lecture de droite à gauche (RTL) pour des langues comme l'arabe ou l'hébreu.

• LTR (Left to Right): La valeur par défaut pour les langues se lisant de gauche à droite.
• RTL (Right to Left): Utilisée pour les langues se lisant de droite à gauche.

/* Pour un texte en arabe ou hébreu */
.rtl {
  direction: rtl;
}

Mode d'écriture (writing-mode)

writing-mode définit si les lignes de texte sont disposées horizontalement ou verticalement, ainsi que la direction dans laquelle les blocs de texte progressent.

• horizontal-tb: Texte horizontal, de haut en bas. C'est le mode par défaut pour la plupart des langues.
• vertical-rl: Texte vertical, où les lignes sont disposées de haut en bas et progressent de droite à gauche.
• vertical-lr: Texte vertical, où les lignes sont disposées de haut en bas et progressent de gauche à droite.

/* Pour un texte vertical japonais ou chinois */
.vertical-rl {
  writing-mode: vertical-rl;
}