无法在 css 中应用自定义字体

Question

我很难理解哪里出了问题...我正在声明一个简单的字体规则：

@font-face {
  font-family: 'my-font';
  url: ('/assets/font.woff2') format('woff2');
  font-style: normal;
  font-weight: normal;
}

我是这样声明的：

body {
  font-family: 'my-font', monospace;
}

body h1 {
  font-family: inherit;
}

文件结构：

index.html
styles.css
assets/
  font.woff2

h1 始终呈现等宽，无论 url 是什么。

如果我访问 localhost:port/assets/font.woff2，浏览器会正确下载字体。 如果我添加 请求已发出，但似乎仍未应用于文档。

我已经在多个浏览器中测试过。

Answer 1

为 URL 字体文件试试这个。

url: ('./assets/font.woff2') format('woff2');

Answer 2

应该是

src: url('./assets/font.woff2')

Answer 3

声明没有问题。 试试这个方法：

           @font-face {
             font-family: 'MyFont';
             src:  url('./assets/font.woff2') format('woff2'),
        }

Answer 4

你能确认一下吗？

• @font-face 规则应该在任何样式之前添加到样式表中，是吗？
• 字体文件在您网页的根目录下？
• 尝试 'myFont' 而不是 'my-font'。

@font-face {
    font-family: Chunkfive;
    src: url('Chunkfive.otf');
}