How to remove extra lines at css text-stroke-CodePudding

I want to use text-stroke and make text transparent over image. But when I do it, text-stroke also show the lines which are inside the text. I use Montserrat(from google fonts). I would like to get your help

here is my html and css codes:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=block');

.header-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 66px;
  font-weight: 900;
  line-height: 117.02px;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px black;
  -webkit-font-smoothing: antialiased;
}

<h1 >ABCD EFGH</h1>

CodePudding user response：

You can use text-shadow as an alternative to text-stroke

As per docs: text-stroke feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web
The rendering behaviour is related to font types and you will have no control over it

You can just use the text shadow like

text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

Working code concept below

(line height and font size adjusted for better display for this snippet)

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=block');
.header-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 33px;
  font-weight: 900;
  
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 2px black;
  -webkit-font-smoothing: antialiased;
}

.alt {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: white;
  font-size: 33px;
  font-weight: 900;
  
  -webkit-font-smoothing: antialiased;
  font-family: 'Montserrat', sans-serif;
}

<h1 >ABCD EFGH</h1>

<h1 >ABCD EFGH</h1>

CodePudding user response：

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=block');

.container {
  min-height: 100vh;
  background: url('https://imgs.search.brave.com/GlZ-EO67MwBX5URzZNAF3Y7KBf6z2s2fr21P2ZemVqY/rs:fit:1200:1200:1/g:ce/aHR0cDovL3d3dy5w/aXhlbHN0YWxrLm5l/dC93cC1jb250ZW50/L3VwbG9hZHMvMjAx/Ni8wNi9IRC1KdW5n/bGUtSW1hZ2UuanBn');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.alt {
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
  color: white;
  font-size: 33px;
  font-weight: 900;
  
  -webkit-font-smoothing: antialiased;
  font-family: 'Montserrat', sans-serif;
}

<div >
  <h1 >ABCD EFGH</h1>
</div>