CSS - 获得奇怪的字体渲染

Question

我只是在做导航栏，当我进入浏览器时，所有字体系列都呈现如下：

Rendering like this

这是我的代码：

字体.css：

 /* @font-face */

@font-face {
  font-family: 'Roboto';
  src: '../fonts/Roboto-Light.ttf';
}

style.css：

    /* import fonts from fonts.css file */

@import url(./fonts.css);
@import url(./partials/variables.css);

/* Start Navigation */
.headerArea .mainMenu .navbar .navbar-brand {
  padding: 0 2rem 0 5rem;
}

.headerArea .mainMenu .navbar {
  padding: 1rem 15rem;
}

.headerArea .mainMenu .nav-item .nav-link {
  /*font-family: 'Roboto', cursive; */
  font-family: var(--roboto);
  font-weight: 300;
  padding: 1.7rem;
  color: var(--title-color);
}

/* End Navigation */

variables.css：

 html,
body {
  margin: 0%;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

/* CSS Variables */

:root {
  --primary-color: #4458dc;
  --primary-color2: #854fee;
  --title-color: #141313;
  --text-color: #777777;
  --border-color: #201f1f17;
  --gradient-color: linear-gradient(90deg, #4458dc 0%, #854fee 100%);
  --primary-color: #4458dc;
  --primary-color: #4458dc;

  /* font family variables */
  --roboto: 'Roboto', cursive;
}

我尝试了更多的字体系列，他们都得到了这个方面。 我用的是 Bootstrap 5，不知道有没有问题。

Answer 1

fonts.css 文件中存在语法错误。字体源应写成如下，使用括号：

src: url(../fonts/Roboto/Roboto-Regular.ttf);