Les polices de caractères sur le Web sont essentiellement des graphiques vectoriels. C’est pourquoi vous pouvez les afficher à 12px ou 120px et elles restent nettes et aux contours relativement précis. Vecteur signifie que leur forme est déterminée par des points et des mathématiques pour décrire la forme, plutôt que par des données de pixel réelles. Comme ils sont vectoriels, il serait logique que nous puissions faire des choses que d’autres programmes vectoriels (par exemple Adobe Illustrator) peuvent faire avec du texte vectoriel, comme dessiner un trait autour des caractères individuels. Eh bien, nous le pouvons ! Exemple :
h1 { /* Prefix required. Even Firefox only supports the -webkit- prefix */ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black;}Or abrégé :
h1 { -webkit-text-stroke: 1px black;}Vous pourriez vous dire « Cool, mais si seulement certains navigateurs supportent cela, si je définis la couleur de mon texte à white et que mon arrière-plan est white, le trait lui donne un aspect cool dans les navigateurs supportés mais disparaît entièrement dans les navigateurs non supportés ! »
Une possibilité est la suivante :
h1 { color: black; -webkit-text-fill-color: white; /* Will override color (regardless of order) */ -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: black;}Présentée ici avec la police @font-face Anime Ace 2 de Nate Piekos:
Une autre possibilité est de ne s’appliquer que si elle est prise en charge:
@supports (-webkit-text-stroke: 1px black) { h1 { -webkit-text-stroke: 1px black; -webkit-text-fill-color: white; }}Support
Ces données de support des navigateurs proviennent de Caniuse, qui a plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité à partir de cette version.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 4* | 49* | No | 15* | 3.1* |
Mobile / Tablette
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 89* | 86* | 2.1* | 4,0-4,1* |
Simulation
Nous pouvons aller un peu plus loin en ne nous appuyant pas entièrement sur le propriétaire WebKit. Nous pouvons utiliser la propriété text-shadow (prise en charge par Firefox, Opera et IE 10 également) et simuler un trait. Nous utiliserons quatre ombres, chacune décalée de 1px de noir sans étalement, une en haut à droite, une en haut à gauche, une en bas à gauche et une en bas à droite. Nous allons supprimer le -webkit-text-fill-color propriétaire de WebKit en faveur de color puisque nous sommes maintenant compatibles avec tous les navigateurs. Le seul récalcitrant serait IE9 et inférieur, pour lequel vous pouvez bien sûr utiliser des feuilles de style spécifiques à IE pour en tenir compte.
h1 { color: white; text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}
Combinaison
Utiliser à la fois un trait et une ombre peut être un grand effet. Jetons sur un trait WebKit, le trait d’ombre de texte polyvalent, ainsi qu’un trait d’ombre de texte plus profond.
h1 { -webkit-text-stroke: 1px black; color: white; text-shadow: 3px 3px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;}
Démo
Voir le stylo
Texte stroboscopique avec alternatives par CSS-.Tricks (@css-tricks)
sur CodePen.
Alignement
Si vous êtes familier avec Adobe Illustrator, vous savez peut-être que vous pouvez aligner un trait à l’intérieur d’une forme, à l’extérieur ou centré. Cette option se présente comme suit dans la palette :
Pour des raisons qui me sont inconnues, le texte dans Illustrator ne peut être défini que sur un alignement du trait central également. Cependant, une fois que vous avez étendu le texte dans des chemins vectoriels réguliers, les trois options sont disponibles. Rappel de Sam Frysteen : ajoutez un nouveau trait dans le panneau Apparence et déplacez-le sous votre texte (en gros, cela imite l’alignement du trait extérieur).
Seul l’alignement du trait du texte extérieur me semble correct. Il est regrettable, à la fois pour CSS et pour Illustrator, que le défaut non modifiable soit centré. La solution consiste simplement à ne pas trop s’emballer avec l’épaisseur de votre bordure de trait et tout devrait bien se passer. Remarque : la solution du texte ombré uniquement n’a pas ce problème, mais elle est également incapable de tracer plus de 1px.
paint-order vous permet d’avoir esssentiellement des traits extérieurs définis, une fois que plus de navigateurs le supporteront.Ce que nous ne pouvons pas faire
Il y a d’autres choses que les programmes graphiques basés sur les vecteurs peuvent faire avec le texte. Vous pouvez écraser la lettre horizontalement / les étirer verticalement. Ce type de traitement de texte est presque universellement désapprouvé, donc pas de grande perte que nous ne puissions pas le faire. Vous pouvez également placer le texte sur une ligne irrégulière (comme autour d’un cercle). Il serait certainement intéressant de pouvoir le faire avec du texte Web. Peut-être pourrions-nous définir le texte pour qu’il suive le chemin de la bordure de son élément parent.
p.circular { width: 200px; height: 200px; border-radius: 100px; /* NOT REAL */ text-align: border-path;}Dans Illustrator, nous pouvons également indiquer à un trait comment gérer les angles vifs : arrondis, biseautés ou en onglet. Ceux-ci peuvent avoir des effets sympathiques, ne sont pas possibles sur le web. Cependant, la gestion des coins par WebKit est assez agréable à sa valeur par défaut (quelle qu’elle soit), et sans doute plus agréable que toutes les options d’Illustrator.
Fantises
Pour mémoire, vous pouvez utiliser n’importe quel type de valeur de couleur pour la couleur du trait (hex, rgba, hsla, mot-clé). Cela signifie des traits transparents si vous le souhaitez, qui effectivement « s’empilent » dans le sens où si les traits se chevauchent (fréquent), ils seront plus foncés.
En ce qui concerne l’animation des images clés, la couleur du trait s’animera mais pas la largeur du trait (bizarre).
/* Only the color will change, not the width */@keyframes colorchange { 0% { -webkit-text-stroke: 10px red; } 100% { -webkit-text-stroke: 20px green; }}.