source : https://www.gerits-aurelien.be/fr/pages/23-creer-des-effets-de-contour-de-texte-avec-css/

Méthode 1 : utiliser text-stroke (la propriété native)

Comprendre text-stroke

La propriété text-stroke (ou -webkit-text-stroke pour une meilleure compatibilité navigateur) est un raccourci qui combine l'épaisseur (text-stroke-width) et la couleur (text-stroke-color) du contour.

-webkit-text-stroke: 2px red;
text-stroke: 2px red;

Limitations et problèmes communs

Malgré sa simplicité, text-stroke présente quelques inconvénients majeurs :

• Problèmes de rendu des lignes internes : Avec certaines polices (notamment les polices sans-serif géométriques comme Montserrat, Inter, Heebo), text-stroke peut créer des lignes internes indésirables ou donner l'impression que le contour est appliqué à tous les segments internes des lettres. Cela peut rendre le texte moins lisible et visuellement décevant.

• Compatibilité : Bien que largement supporté par les navigateurs modernes (y compris Firefox, Chrome, Safari, Edge), il nécessite souvent le préfixe -webkit- pour fonctionner correctement partout

Méthode 2 : Utiliser text-shadow (L'alternative robuste)

Face aux limitations de text-stroke, l'utilisation de multiples text-shadow est une technique très efficace et souvent préférée pour créer des contours de texte.

Pourquoi text-shadow est une bonne alternative ?

La propriété text-shadow permet de créer des ombres sous le texte. En créant plusieurs ombres, chacune décalée d'un pixel dans une direction différente (haut, bas, gauche, droite et les diagonales), on peut simuler un contour uniforme autour du texte.

Avantages de text-shadow

• Pas de lignes internes : C'est le plus grand avantage ! Puisque text-shadow projette des ombres plutôt que de modifier le chemin du glyphe, il n'y a pas de problèmes d'artefacts ou de lignes internes indésirables.

• Excellente compatibilité : text-shadow est une propriété CSS standard et est universellement supportée par tous les navigateurs modernes, sans préfixe.

• Contrôle fin : Vous pouvez ajuster précisément l'épaisseur du "contour" en variant le décalage des ombres

.titre-contour-shadow {
    font-family: 'Montserrat', sans-serif; /* Utilisez n'importe quelle police Google Font ! */
    font-size: 5rem;
    color: white; /* Couleur du remplissage du texte */
    text-align: center;
    /* Création du contour avec text-shadow */
    text-shadow:
        -2px -2px 0 black, /* Ombre vers le haut-gauche */
        2px -2px 0 black,  /* Ombre vers le haut-droite */
        -2px 2px 0 black,  /* Ombre vers le bas-gauche */
        2px 2px 0 black;   /* Ombre vers le bas-droite */
        /* Pour un contour plus épais, ajoutez plus d'ombres ou augmentez les valeurs des pixels */
        /* Ex: 3px contour:
        -3px -3px 0 black, 3px -3px 0 black, -3px 3px 0 black, 3px 3px 0 black,
        -3px 0px 0 black, 0px -3px 0 black, 3px 0px 0 black, 0px 3px 0 black;
        */
}