Search code examples
htmlcssfont-facewebfontstruetype

A weird thick line under text

I am trying to make a portfolio site for a school project and this is what it looks like under normal resolution

enter image description here

Looks normal right? However when I zoom out a weird thick line appears under the text

enter image description here

Here's the HTML and CSS code.

@font-face {
  font-family: 'KGDefyingGravity';
  src: url(../fonts/KGDefyingGravity.ttf);
}

h1 {
  font-family: 'KGDefyingGravity';
  font-size: 6em;
  text-align: center;
  color: rgb(15, 0, 223);
  letter-spacing: -1px;
}

.selection {
  font-family: 'KGDefyingGravity';
  font-size: 5em;
  text-align: center;
  color: rgb(223, 0, 15);
  letter-spacing: -1px;
}
<h1>[|||||||'S|PORTFOLIO|SITE]</h1>
<a href="\index.html" class="selection">[HOME|PAGE]</a>

EDIT: I have no idea why my code is a code snippet. The site just seemed to automatically do that.

Solution

  • Probably default user agent stylesheet contains

    text-decoration: underline;

    To avoid this you should put

    text-decoration: none;

    inside the selector of DOM element.

    For example:

    h1 {
  text-decoration: none;
}

    I hope that I helped ;)