css - 使用@font-face 时字体边缘变细

Question

当我通过谷歌字体标签向我的网站添加字体时，我的字体显示正常。但是当我通过@font-face 将它添加为文件时，它会变薄。

例子：

这是我使用的代码：

.title {
    color: white;
    font-family: 'myBodoni', serif;
    position: absolute;
    top: 120px;
    left: 200px;
    font-size: 64px;
    z-index: 2;
    line-height: normal;
}
.img {
    position: relative;
    margin: 3%;
}
@font-face {
  font-family: myBodoni;
  src: url(bodoni-variable.ttf); //variable file downloaded directly from google fonts
}

当我添加此代码时，它可以正常工作：

CSS：

font-family: 'Bodoni Moda', serif;

html

  <link href="https://fonts.googleapis.com/css2?family=Bodoni+Moda&display=swap" rel="stylesheet">

这是使用以下代码的外观

标签： css

Answer 1

这是因为您只添加一个@font-type. 您需要添加@font-typefor eot, woff2, woff& svg：

@font-face {
  font-family: 'MyWebFont';
  src: url('webfont.eot'); /* IE9 Compat Modes */
  src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('webfont.woff2') format('woff2'), /* Super Modern Browsers */
       url('webfont.woff') format('woff'), /* Pretty Modern Browsers */
       url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
       url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}