{"id":70494,"date":"2023-06-28T13:14:02","date_gmt":"2023-06-28T12:14:02","guid":{"rendered":"https:\/\/kinsta.com\/fr\/?p=70494&preview=true&preview_id=70494"},"modified":"2023-10-27T10:34:39","modified_gmt":"2023-10-27T09:34:39","slug":"contour-texte-css","status":"publish","type":"post","link":"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/","title":{"rendered":"Comment ajouter un contour de texte avec CSS"},"content":{"rendered":"

En mati\u00e8re de conception de sites web<\/a>, l’attrait visuel de votre contenu joue un r\u00f4le essentiel pour capter et retenir l’attention de votre public. L’un des aspects de la conception qui peut avoir un impact significatif sur l’esth\u00e9tique g\u00e9n\u00e9rale et la lisibilit\u00e9 de votre site web est le style du texte.<\/p>\n

La stylisation du texte ne se limite pas au choix d’une police<\/a> et d’une couleur de police<\/a>. Il s’agit de combiner soigneusement diverses propri\u00e9t\u00e9s CSS<\/a> pour obtenir l’effet d\u00e9sir\u00e9, par exemple en utilisant des contours de texte pour rendre votre texte visuellement percutant.<\/p>\n

Dans cet article, nous allons nous pencher sur l’art de styliser le contour des textes \u00e0 l’aide de CSS et explorer son fonctionnement ainsi que les diff\u00e9rentes options que vous pouvez utiliser.<\/p>\n

<\/div><\/kinsta-auto-toc>\n

Comprendre les textes web<\/h2>\n

Un texte web est un texte affich\u00e9 sur une page web. Les polices de caract\u00e8res jouent un r\u00f4le essentiel dans l’affichage du texte sur le web. Ces polices sont essentiellement des graphiques vectoriels, ce qui signifie que les donn\u00e9es en pixels ne les limitent pas et qu’elles peuvent \u00eatre affich\u00e9es \u00e0 diff\u00e9rentes tailles tout en conservant leur nettet\u00e9 et leur clart\u00e9.<\/p>\n

L’un des aspects fascinants des polices en tant que graphiques vectoriels est la possibilit\u00e9 d’appliquer des traits ou des contours autour des caract\u00e8res individuels. Tout comme vous pouvez dessiner un trait autour d’une forme dans des programmes vectoriels tels qu’Adobe Illustrator, CSS vous permet d’obtenir le m\u00eame effet sur un texte web.<\/p>\n

2 m\u00e9thodes pour ajouter un contour au texte avec CSS<\/h2>\n

Pour ajouter un effet de contour \u00e0 votre texte \u00e0 l’aide de CSS, il existe deux m\u00e9thodes. Explorons les inconv\u00e9nients de ces m\u00e9thodes et voyons comment les utiliser.<\/p>\n

1. Utilisation de la propri\u00e9t\u00e9 text-stroke<\/h3>\n

La propri\u00e9t\u00e9 text-stroke<\/code> est une propri\u00e9t\u00e9 CSS que vous pouvez utiliser pour ajouter un contour \u00e0 vos textes. Elle vous permet de sp\u00e9cifier les contours width<\/code> et color<\/code>. Cette propri\u00e9t\u00e9 n’est prise en charge que par les navigateurs bas\u00e9s sur WebKit, et pour l’utiliser, vous devez ajouter le pr\u00e9fixe -webkit-<\/code>.<\/p>\n

Par exemple, ajoutons un contour \u00e0 un texte d’en-t\u00eate h1<\/code> – \u00ab Welcome to Kinsta \u00bb :<\/p>\n

<h1>Welcome to Kinsta<\/h1><\/code><\/pre>\n
Voici comment la propri\u00e9t\u00e9 text-stroke<\/code> sera utilis\u00e9e avec le pr\u00e9fixe -webkit-<\/code>:<\/p>\n
h1 {\n  -webkit-text-stroke-width: 3px;\n  -webkit-text-stroke-color: black;\n}<\/code><\/pre>\n
-webkit-text-stroke-width<\/code> et -webkit-text-stroke-color<\/code> sp\u00e9cifient respectivement les sites width<\/code> et color<\/code>. La propri\u00e9t\u00e9 width<\/code> est remplac\u00e9e par 3px<\/code> et color<\/code> par black<\/code>.<\/p>\n
\"Ajout
Ajout d’un contour avec la propri\u00e9t\u00e9 text-stroke.<\/figcaption><\/figure>\n
Les deux propri\u00e9t\u00e9s ci-dessus peuvent \u00eatre combin\u00e9es avec la propri\u00e9t\u00e9 abr\u00e9g\u00e9e -webkit-text-stroke<\/code>, qui sp\u00e9cifie simultan\u00e9ment les traits color<\/code> et width<\/code>.<\/p>\n
h1 {\n  -webkit-text-stroke: 3px black;\n}<\/code><\/pre>\n
Vous obtiendrez le m\u00eame r\u00e9sultat.<\/p>\n
Prise en charge de la propri\u00e9t\u00e9 text-stroke<\/h4>\n
Selon caniuse<\/a>, la propri\u00e9t\u00e9 text-stroke<\/code> n’est pas prise en charge par le navigateur Internet Explorer.<\/p>\n
\"Prise
Prise en charge de la propri\u00e9t\u00e9 text-stroke.<\/figcaption><\/figure>\n
Si vous utilisez la propri\u00e9t\u00e9 text-stroke<\/code> pour d\u00e9finir le contour de vos textes et qu’un utilisateur utilise un navigateur non pris en charge, il se peut que ce texte ne soit pas visible si sa couleur correspond \u00e0 la couleur d’arri\u00e8re-plan.<\/p>\n
Pour rem\u00e9dier \u00e0 ce probl\u00e8me, vous pouvez utiliser la propri\u00e9t\u00e9 -webkit-text-fill-color<\/code> pour d\u00e9finir color<\/code> pour le texte et d\u00e9finir une couleur de repli avec la propri\u00e9t\u00e9 color<\/code>:<\/p>\n
h1 {\n  color: black;\n  -webkit-text-fill-color: white; \/* Will override color (regardless of order) *\/\n  -webkit-text-stroke: 3px black;\n}<\/code><\/pre>\n
\"Ajout
Ajout de la prise en charge des navigateurs non pris en charge.<\/figcaption><\/figure>\n
Lorsqu’un navigateur ne prend pas en charge la propri\u00e9t\u00e9 text-stroke<\/code>, il utilise la couleur d\u00e9finie par la propri\u00e9t\u00e9 color<\/code>.<\/p>\n
\"Solution
Solution de repli lorsque le navigateur n’est pas pris en charge.<\/figcaption><\/figure>\n
Une autre option consiste \u00e0 confirmer que le navigateur prend en charge la propri\u00e9t\u00e9 -webkit-text-stroke<\/code> avant d’ajouter le style.<\/p>\n
@supports (-webkit-text-stroke: 3px black) {\n  h1 {\n    -webkit-text-fill-color: white;\n    -webkit-text-stroke: 3px black;\n  }\n}<\/code><\/pre>\n
2. Utilisation de la propri\u00e9t\u00e9 text-shadow<\/h3>\n
Si vous ne souhaitez pas g\u00e9rer les diff\u00e9rences de prise en charge, vous pouvez utiliser la propri\u00e9t\u00e9 text-shadow<\/code>, qui prend en charge toutes<\/a> les derni\u00e8res versions des navigateurs les plus r\u00e9pandus.<\/p>\n
\"Prise
Prise en charge de la propri\u00e9t\u00e9 text-shadow.<\/figcaption><\/figure>\n
Pour la propri\u00e9t\u00e9 text-shadow<\/code>, nous utiliserons quatre ombres, chacune en haut \u00e0 droite<\/strong>, en haut \u00e0 gauche<\/strong>, en bas \u00e0 gauche<\/strong> et en bas \u00e0 droite<\/strong>.<\/p>\n
h1 {\n  color: #fff;\n  text-shadow:\n    3px 3px 0 #000,\n    -3px 3px 0 #000,\n    -3px -3px 0 #000,\n    3px -3px 0 #000;\n}<\/code><\/pre>\n
Dans cet exemple, nous utilisons quatre ombres pour cr\u00e9er un effet de contour de texte. Chaque ombre a un d\u00e9calage de 3 pixels par rapport au texte et la couleur est d\u00e9finie sur noir (#000<\/code>). Cet effet est similaire \u00e0 celui g\u00e9n\u00e9r\u00e9 par la premi\u00e8re m\u00e9thode.<\/p>\n
\"Ajout
Ajout d’un contour avec la propri\u00e9t\u00e9 text-shadow.<\/figcaption><\/figure>\n
En appliquant des ombres aux quatre coins du texte, nous obtenons un contour bien d\u00e9fini. N’h\u00e9sitez pas \u00e0 ajuster les d\u00e9calages de pixels, les couleurs de l’ombre ou les couleurs du texte en fonction de vos pr\u00e9f\u00e9rences en mati\u00e8re de conception.<\/p>\n
Cette m\u00e9thode vous offre un avantage suppl\u00e9mentaire car vous pouvez ajuster les ombres horizontales et verticales en fonction de ce qui convient au texte. Vous pouvez \u00e9galement ajouter un rayon de flou :<\/p>\n
h1 {\n  color: #fff;\n  text-shadow:\n    3px 3px 2px #000,\n    -3px 3px 2px #000,\n    -3px -3px 0 #000,\n    3px -3px 0 #000;\n}<\/code><\/pre>\n
\"Ajoutez
Ajoutez du flou au contour avec la propri\u00e9t\u00e9 text-shadow.<\/figcaption><\/figure>\n
L’une des limites de l’utilisation des ombres de texte est que vous pouvez rencontrer un effet de trait discontinu lorsque la longueur de l’ombre d\u00e9passe 1 pixel (vous le verrez si vous comparez avec la m\u00e9thode text-stroke<\/code> ).<\/p>\n
Combinaison des propri\u00e9t\u00e9s text-stroke et text-shadow<\/h2>\n
Vous pouvez combiner les deux propri\u00e9t\u00e9s pour obtenir un effet visuellement \u00e9poustouflant qui associe un contour de texte parfait \u00e0 un flou subtil et \u00e0 des effets suppl\u00e9mentaires offerts par la propri\u00e9t\u00e9 text-shadow<\/code>. Cette combinaison permet une approche polyvalente et personnalisable de l’am\u00e9lioration de l’apparence de votre texte.<\/p>\n
h1 {\n  -webkit-text-stroke: 1px black;\n   color: white;\n   text-shadow:\n       3px 3px 0 #000,\n     -1px -1px 0 #000,  \n      1px -1px 0 #000,\n      -1px 1px 0 #000,\n       1px 1px 0 #000;\n}<\/code><\/pre>\n
\"Combinaison
Combinaison de text-stroke et text-shadow pour cr\u00e9er un contour.<\/figcaption><\/figure>\n
Vous pouvez \u00e9galement vous dispenser d’ajouter des ombres individuelles \u00e0 chaque coin et appliquer une ombre g\u00e9n\u00e9rale \u00e0 l’aide d’une seule ligne :<\/p>\n
#heading-1{\n\tcolor: white;\n\t-webkit-text-stroke: 1px #F8F8F8;\n\ttext-shadow: 0px 1px 4px #23430C;\n}\n\n#heading-2{\n\tcolor: white;\n\t-webkit-text-stroke: 1px #F8F8F8;\n\ttext-shadow: 0px 2px 4px red;\n}\n\n#heading-3{\n\tcolor: #333;\n\t-webkit-text-stroke: 1px #282828;\n\ttext-shadow: 0px 4px 4px #282828;\n}<\/code><\/pre>\n
\"Plus
Plus d’exemples d’application de contour avec text-stroke et text-shadow.<\/figcaption><\/figure>\n
R\u00e9sum\u00e9<\/h2>\n
Les propri\u00e9t\u00e9s text-stroke<\/code> et text-shadow<\/code> offrent toutes deux des options int\u00e9ressantes pour ajouter des contours \u00e0 votre texte. Le choix de l’une ou l’autre d\u00e9pend de la compatibilit\u00e9 avec le navigateur, des effets souhait\u00e9s et du niveau de contr\u00f4le dont vous avez besoin pour votre conception.<\/p>\n
Exp\u00e9rimentez diff\u00e9rentes techniques et trouvez la meilleure approche pour cr\u00e9er des contours de texte captivants et visuellement attrayants. Vous pouvez combiner les capacit\u00e9s d’h\u00e9bergement de Kinsta<\/a> avec votre projet complet pour une pr\u00e9sence en ligne attrayante.<\/p>\n
Partagez votre exp\u00e9rience ! Avez-vous utilis\u00e9 d’autres approches que celles d\u00e9crites dans cet article ? Faites-le nous savoir dans les commentaires.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
En mati\u00e8re de conception de sites web, l’attrait visuel de votre contenu joue un r\u00f4le essentiel pour capter et retenir l’attention de votre public. L’un des …<\/p>\n","protected":false},"author":287,"featured_media":70495,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kinsta_gated_content":false,"_kinsta_gated_content_redirect":"","footnotes":""},"tags":[],"topic":[1020],"class_list":["post-70494","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","topic-outils-developpement-web"],"yoast_head":"\nComment ajouter un contour de texte avec CSS - Kinsta\u00ae<\/title>\n<meta name=\"description\" content=\"Am\u00e9liorez l'attrait de votre site et faites ressortir votre texte gr\u00e2ce \u00e0 un contour de texte attrayant. Commencez \u00e0 mettre en \u0153uvre les techniques CSS !\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/\" \/>\n<meta property=\"og:locale\" content=\"fr_FR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Comment ajouter un contour de texte avec CSS\" \/>\n<meta property=\"og:description\" content=\"Am\u00e9liorez l'attrait de votre site et faites ressortir votre texte gr\u00e2ce \u00e0 un contour de texte attrayant. Commencez \u00e0 mettre en \u0153uvre les techniques CSS !\" \/>\n<meta property=\"og:url\" content=\"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Kinsta\u00ae\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/kinstafrance\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-06-28T12:14:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-27T09:34:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/css-text-outline.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"730\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Joel Olawanle\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:description\" content=\"Am\u00e9liorez l'attrait de votre site et faites ressortir votre texte gr\u00e2ce \u00e0 un contour de texte attrayant. Commencez \u00e0 mettre en \u0153uvre les techniques CSS !\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/css-text-outline.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@olawanle_joel\" \/>\n<meta name=\"twitter:site\" content=\"@kinsta_fr\" \/>\n<meta name=\"twitter:label1\" content=\"\u00c9crit par\" \/>\n\t<meta name=\"twitter:data1\" content=\"Joel Olawanle\" \/>\n\t<meta name=\"twitter:label2\" content=\"Dur\u00e9e de lecture estim\u00e9e\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/\"},\"author\":{\"name\":\"Joel Olawanle\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\"},\"headline\":\"Comment ajouter un contour de texte avec CSS\",\"datePublished\":\"2023-06-28T12:14:02+00:00\",\"dateModified\":\"2023-10-27T09:34:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/\"},\"wordCount\":1176,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/css-text-outline.jpg\",\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/\",\"name\":\"Comment ajouter un contour de texte avec CSS - Kinsta\u00ae\",\"isPartOf\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/css-text-outline.jpg\",\"datePublished\":\"2023-06-28T12:14:02+00:00\",\"dateModified\":\"2023-10-27T09:34:39+00:00\",\"description\":\"Am\u00e9liorez l'attrait de votre site et faites ressortir votre texte gr\u00e2ce \u00e0 un contour de texte attrayant. Commencez \u00e0 mettre en \u0153uvre les techniques CSS !\",\"breadcrumb\":{\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/#breadcrumb\"},\"inLanguage\":\"fr-FR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/#primaryimage\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/css-text-outline.jpg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/css-text-outline.jpg\",\"width\":1460,\"height\":730},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/kinsta.com\/fr\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Outils de d\u00e9veloppement web\",\"item\":\"https:\/\/kinsta.com\/fr\/sujets\/outils-developpement-web\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Comment ajouter un contour de texte avec CSS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/kinsta.com\/fr\/#website\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"name\":\"Kinsta\u00ae\",\"description\":\"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es\",\"publisher\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/kinsta.com\/fr\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-FR\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/kinsta.com\/fr\/#organization\",\"name\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"contentUrl\":\"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg\",\"width\":500,\"height\":500,\"caption\":\"Kinsta\"},\"image\":{\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/kinstafrance\/\",\"https:\/\/x.com\/kinsta_fr\",\"https:\/\/www.instagram.com\/kinstahosting\/\",\"https:\/\/www.linkedin.com\/company\/kinsta\/\",\"https:\/\/www.pinterest.com\/kinstahosting\/\",\"https:\/\/www.youtube.com\/c\/Kinsta\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07\",\"name\":\"Joel Olawanle\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-FR\",\"@id\":\"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g\",\"caption\":\"Joel Olawanle\"},\"description\":\"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.\",\"sameAs\":[\"https:\/\/joelolawanle.com\/\",\"https:\/\/www.linkedin.com\/in\/olawanlejoel\/\",\"https:\/\/x.com\/olawanle_joel\",\"https:\/\/www.youtube.com\/@joelolawanle\"],\"gender\":\"male\",\"knowsAbout\":[\"JavaScript\",\"React\",\"Next.js\"],\"knowsLanguage\":[\"English\"],\"jobTitle\":\"Technical Editor\",\"worksFor\":\"Kinsta\",\"url\":\"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Comment ajouter un contour de texte avec CSS - Kinsta\u00ae","description":"Am\u00e9liorez l'attrait de votre site et faites ressortir votre texte gr\u00e2ce \u00e0 un contour de texte attrayant. Commencez \u00e0 mettre en \u0153uvre les techniques CSS !","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/","og_locale":"fr_FR","og_type":"article","og_title":"Comment ajouter un contour de texte avec CSS","og_description":"Am\u00e9liorez l'attrait de votre site et faites ressortir votre texte gr\u00e2ce \u00e0 un contour de texte attrayant. Commencez \u00e0 mettre en \u0153uvre les techniques CSS !","og_url":"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/","og_site_name":"Kinsta\u00ae","article_publisher":"https:\/\/www.facebook.com\/kinstafrance\/","article_published_time":"2023-06-28T12:14:02+00:00","article_modified_time":"2023-10-27T09:34:39+00:00","og_image":[{"width":1460,"height":730,"url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/css-text-outline.jpg","type":"image\/jpeg"}],"author":"Joel Olawanle","twitter_card":"summary_large_image","twitter_description":"Am\u00e9liorez l'attrait de votre site et faites ressortir votre texte gr\u00e2ce \u00e0 un contour de texte attrayant. Commencez \u00e0 mettre en \u0153uvre les techniques CSS !","twitter_image":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/css-text-outline.jpg","twitter_creator":"@olawanle_joel","twitter_site":"@kinsta_fr","twitter_misc":{"\u00c9crit par":"Joel Olawanle","Dur\u00e9e de lecture estim\u00e9e":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/#article","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/"},"author":{"name":"Joel Olawanle","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07"},"headline":"Comment ajouter un contour de texte avec CSS","datePublished":"2023-06-28T12:14:02+00:00","dateModified":"2023-10-27T09:34:39+00:00","mainEntityOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/"},"wordCount":1176,"commentCount":0,"publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/css-text-outline.jpg","inLanguage":"fr-FR","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/","url":"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/","name":"Comment ajouter un contour de texte avec CSS - Kinsta\u00ae","isPartOf":{"@id":"https:\/\/kinsta.com\/fr\/#website"},"primaryImageOfPage":{"@id":"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/#primaryimage"},"image":{"@id":"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/#primaryimage"},"thumbnailUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/css-text-outline.jpg","datePublished":"2023-06-28T12:14:02+00:00","dateModified":"2023-10-27T09:34:39+00:00","description":"Am\u00e9liorez l'attrait de votre site et faites ressortir votre texte gr\u00e2ce \u00e0 un contour de texte attrayant. Commencez \u00e0 mettre en \u0153uvre les techniques CSS !","breadcrumb":{"@id":"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/#breadcrumb"},"inLanguage":"fr-FR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/"]}]},{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/#primaryimage","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/css-text-outline.jpg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/06\/css-text-outline.jpg","width":1460,"height":730},{"@type":"BreadcrumbList","@id":"https:\/\/kinsta.com\/fr\/blog\/contour-texte-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/kinsta.com\/fr\/"},{"@type":"ListItem","position":2,"name":"Outils de d\u00e9veloppement web","item":"https:\/\/kinsta.com\/fr\/sujets\/outils-developpement-web\/"},{"@type":"ListItem","position":3,"name":"Comment ajouter un contour de texte avec CSS"}]},{"@type":"WebSite","@id":"https:\/\/kinsta.com\/fr\/#website","url":"https:\/\/kinsta.com\/fr\/","name":"Kinsta\u00ae","description":"Solutions d'h\u00e9bergement premium, rapides et s\u00e9curis\u00e9es","publisher":{"@id":"https:\/\/kinsta.com\/fr\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/kinsta.com\/fr\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-FR"},{"@type":"Organization","@id":"https:\/\/kinsta.com\/fr\/#organization","name":"Kinsta","url":"https:\/\/kinsta.com\/fr\/","logo":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/","url":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","contentUrl":"https:\/\/kinsta.com\/fr\/wp-content\/uploads\/sites\/4\/2023\/12\/kinsta-logo.jpeg","width":500,"height":500,"caption":"Kinsta"},"image":{"@id":"https:\/\/kinsta.com\/fr\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/kinstafrance\/","https:\/\/x.com\/kinsta_fr","https:\/\/www.instagram.com\/kinstahosting\/","https:\/\/www.linkedin.com\/company\/kinsta\/","https:\/\/www.pinterest.com\/kinstahosting\/","https:\/\/www.youtube.com\/c\/Kinsta"]},{"@type":"Person","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/efa7de30245ca15be5ce1dcacff89c07","name":"Joel Olawanle","image":{"@type":"ImageObject","inLanguage":"fr-FR","@id":"https:\/\/kinsta.com\/fr\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/051bf577ce2c837846a1db9eef184758?s=96&d=mm&r=g","caption":"Joel Olawanle"},"description":"Joel is a Frontend developer working at Kinsta as a Technical Editor. He is a passionate teacher with love for open source and has written over 300 technical articles majorly around JavaScript and it's frameworks.","sameAs":["https:\/\/joelolawanle.com\/","https:\/\/www.linkedin.com\/in\/olawanlejoel\/","https:\/\/x.com\/olawanle_joel","https:\/\/www.youtube.com\/@joelolawanle"],"gender":"male","knowsAbout":["JavaScript","React","Next.js"],"knowsLanguage":["English"],"jobTitle":"Technical Editor","worksFor":"Kinsta","url":"https:\/\/kinsta.com\/fr\/blog\/author\/joelolawanle\/"}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/70494","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/users\/287"}],"replies":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/comments?post=70494"}],"version-history":[{"count":6,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/70494\/revisions"}],"predecessor-version":[{"id":70509,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/posts\/70494\/revisions\/70509"}],"alternate":[{"embeddable":true,"hreflang":"en","title":"English","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70494\/translations\/en"},{"embeddable":true,"hreflang":"it","title":"Italian","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70494\/translations\/it"},{"embeddable":true,"hreflang":"pt","title":"Portuguese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70494\/translations\/pt"},{"embeddable":true,"hreflang":"fr","title":"French","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70494\/translations\/fr"},{"embeddable":true,"hreflang":"de","title":"German","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70494\/translations\/de"},{"embeddable":true,"hreflang":"ja","title":"Japanese","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70494\/translations\/jp"},{"embeddable":true,"hreflang":"nl","title":"Dutch","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70494\/translations\/nl"},{"embeddable":true,"hreflang":"es","title":"Spanish","href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70494\/translations\/es"},{"href":"https:\/\/kinsta.com\/fr\/wp-json\/kinsta\/v1\/posts\/70494\/tree"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media\/70495"}],"wp:attachment":[{"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/media?parent=70494"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/tags?post=70494"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/kinsta.com\/fr\/wp-json\/wp\/v2\/topic?post=70494"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}