Is it possible to make font with transparent fill?

Question

IMAGE:

So basically im searching for a way to make something like this "techno" text/title with transparent filling and border of text visible. Is it possible to make that with html/css or did this person use image instead of text?

Answer 1

You can use color and -webkit-text-stroke to achieve the transparent font.

#header {
  background-image: url('https://images.unsplash.com/photo-1557683316-973673baf926?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxleHBsb3JlLWZlZWR8Mnx8fGVufDB8fHx8&w=1000&q=80');
  background-position: center
}

.header-text{
  color: transparent;
  -webkit-text-stroke: 1px white;
  margin-left: 10px;
  font-family: 'Arial';
}

<div id='header'>
  <br>
  <h1 class='header-text' style="font-size: 50px;">text</h1>
  <br>
  <p class='header-text'>Some more info on this product.</p>
  <br>
</div>

Answer 2

possible using -webkit-text-fill-color and -webkit-text-stroke

body {
  background: url(https://images.unsplash.com/photo-1641400504445-99dc922bbe63) center/cover;
}

.transparent {
  background: none;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-text-stroke: 1px #fff;
  font-family: 'Calibri';
  font-size: 80px;
}

<h2 class="transparent">TECHNO</h2>