文字下方奇怪的粗线

Question

我正在尝试为学校项目制作作品集网站，这是正常分辨率下的样子

看起来很正常吧？但是，当我缩小时，文本下方会出现一条奇怪的粗线

这是 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>

编辑：我不知道为什么我的代码是代码片段。该网站似乎会自动执行此操作。

Answer 1

可能默认的用户代理样式表包含

text-decoration: underline;

为避免这种情况，您应该输入

text-decoration: none;

在 DOM 元素的选择器内。

例如：

h1 {
  text-decoration: none;
}

希望对您有所帮助 ;)

文字下方奇怪的粗线

A weird thick line under text

html

css

font-face

webfonts

truetype