0

EDIT: A similar post has already been made: Text Stroke (-webkit-text-stroke) css Problem

I am having a very strange problem with a text on a website I am working on. This was not happening before, and I did not change anything, but one day I loaded the website and noticed the text stroke I applied was going through itself (see image). I am using Tailwind CSS. Here is the code for the element

The letter's a and e are cutting through themselves.

Code for the element:

<h1 className="text-7xl text-white text-stroke-3 text-center mt-5 font-bold">
          How are you feeling today? 
</h1>

Also this text-stroke is a custom CSS property that I defined as follows:

.text-stroke-3 {
    -webkit-text-stroke: 3px black;
}

I tried changing the h1 to a paragraph and changing the font of the text. I also tried using

<b></b>

to encapsulate the text instead of font-bold. None of these worked.

Zachary Seidner
  • 11
  • 4
  • I think you have changed the font style in a parent element and it impacts this element. Inspect that element and be sure it is not because of a new font. – amel Jan 26 '23 at 12:51
  • Probably you're using a variable font. See this post: ["Text Stroke (-webkit-text-stroke) css Problem"](https://stackoverflow.com/questions/69253420/text-stroke-webkit-text-stroke-css-problem/69937834#69937834) for workarounds. – herrstrietzel Jan 26 '23 at 19:56

2 Answers2

0

I guess the problem is caused by the -webkit-text-stroke property, which is not supported by all browsers, and may cause issues with some fonts.

You could instead use a text shadow.

.text-stroke-3 {
    text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}

This creates four text shadows around the text, which will give the appearance of a stroke. You can adjust the size of the stroke by changing the values of the text-shadow property.

krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
  • Interesting solution, but there is still some noticeable visual oddities around the text with the shadows. Also I am using chrome so my browser shouldn't be the issue. – Zachary Seidner Jan 27 '23 at 03:35
0

A similar post has been made already: Text Stroke (-webkit-text-stroke) css Problem

It seems that the main problem is with webkit text stroke itself being inconsistent. I solved this problem by using a different font.

Zachary Seidner
  • 11
  • 4