@font-face 不工作:(

Question

我无法让我的@font-face 工作。当我检查元素时它会注册，但它只会触发备份衬线字体。我就是这样设置的：

    @font-face {
    font-family: 'Wremena';
      src: url('./fonts/Wremena Light.woff') format('woff'),
           url('./fonts/Wremena Light.woff2') format('woff2'),
           url('./fonts/Wremena Light.ttf') format('truetype'),
           url('./fonts/Wremena Light.otf') format('opentype');
      font-weight: normal;
      font-style: normal;
    }

以及如何使用：

    .name {
      font-family: 'Wremena', serif;
      font-weight: lighter;
      font-size: 2em;
      line-height: 1em;
    }

网站链接在这里： www.koreatownmovie.com

Answer 1

Don't use all those formats。从使用 woff/woff2 开始。然后，请记住 @font-face 是在告诉 CSS 引擎在看到 font-... 指令时它需要做什么。在这种情况下，您告诉它仅在看到 font-weight: normal 和 font-style: normal 时才从您提供的 URL 加载字体，然后在您使用的页面 CSS “字体粗细：更轻”。由于您没有告诉 CSS 引擎在看到该字体粗细时要做什么，因此它不会使用该自定义字体：您没有告诉它这样做。

如果您希望它使用您的字体而不考虑特定的字体-...属性，请不要添加该属性

@font-face {
  font-family: Wremena;
   src: url('./fonts/Wremena Light.woff') format('woff'),
        url('./fonts/Wremena Light.woff2') format('woff2');
}

完成。无论font-style 或font-weight 等如何，现在都应该使用此字体。