自定义字体的字体显示为“毛骨悚然”

我已使用将自定义字体添加到我的项目中 font-face font-family 以这种方式:

@font-face {
  font-family: "Caprice";
  src: url("../fonts/Caprice.ttf") format("truetype");
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: "Caprice", Arial, Helvetica, sans-serif;
}

但结果是,字体并没有按应有的方式呈现,而是以一种非常“令人毛骨悚然”的方式呈现。下面是一张图片,让您更好地理解:

我试过改变字体,但结果完全一样。我也在不同的浏览器中尝试过这个页面,但是没有成功。

我做错什么了?

我试过的所有字体都和我看到的完全不同。