Странная толстая линия под текстом - PullRequest
Новая
       60

Странная толстая линия под текстом

0 голосов
/ 04 декабря 2018

Я пытаюсь создать сайт-портфолио для школьного проекта, и вот как он выглядит при обычном разрешении

enter image description here

Выглядит нормально, верно?Однако при уменьшении масштаба под текстом появляется странная жирная линия

enter image description here

Вот код HTML и CSS. 

@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>

РЕДАКТИРОВАТЬ: Я понятия не имею, почему мой код является фрагмент кода.Казалось, что сайт автоматически делает это.

1 Ответ

0 голосов
/ 04 декабря 2018

Возможно, таблица стилей пользовательского агента по умолчанию содержит

text-ornament: underline;

Чтобы избежать этого, вы должны поставить

text-украшение: нет;

внутри селектора элемента DOM.

Например: 

h1 {
  text-decoration: none;
}

Надеюсь, что помог;)

...