浏览器无法使用@font-face获取woff字体文件

Question

对于我的服务器，我希望启用动态加载字体。服务器运行 nestjs

我将 .woff 文件托管在服务器上名为 'fonts' 的目录中。

@font-face 是在 html 头部部分的样式标签中动态构建的（根据所需字体）。

但是，当我将 url 设置为文件路径时，如下所示：

@font-face {
      font-family: Roboto;
      src: url(fonts/roboto-v29-latin-regular.woff);
    }

然后 GET 以 404 not found 结束。

当我只使用文件名时：

@font-face {
          font-family: Roboto;
          src: url(roboto-v29-latin-regular.woff);
        }

然后返回一个空对象{}

非常感谢您的见解！

Answer 1

有几个解决方案可能是潜在的修复方法，具体取决于您如何处理 CSS 文件。

如果 roboto-v29-latin-regular.woff 文件在 fonts 文件夹中，这意味着 CSS 尝试在本地目录中查找路径。要在本地目录中查找某些内容，请在斜杠 ( ./ ) 前面使用点。所以如果我们有以下目录：

/fonts
 -roboto-v29-latin-regular.woff
styles.css

那么 roboto-v29-latin-regular.woff 的路径将是 ./fonts/roboto-v29-latin-regular.woff 并且会导致以下字体：

@font-face {
  font-family: Roboto;
  src: url(./fonts/roboto-v29-latin-regular.woff);
}

这是您可以轻松访问本地或高于当前级别的目录的方法。阅读 this.

但是，如果您以不同的方式处理 CSS，您只需在 fonts 文件夹前提供一个 /，这将由从本地实例服务器获取字体 URL:

/* Imagine your URL to be: http://localhost:3000/fonts/roboto-v29-latin-regular.woff */

@font-face {
  font-family: Roboto;
  src: url(/fonts/roboto-v29-latin-regular.woff);
}

同样，如果上述解决方案 none 有效，只需将字体放在外部 URL（来自 google 字体等）


@font-face {
  font-family: Roboto;
  src: url(<EXTERNAL_URL>);
}

Answer 2

问题是 nestjs 没有提供字体文件。我必须使用 ServeStaticModule.forRoot:

从 appModule 静态地为它们提供服务

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', 'fonts'),
    }),
  ],
  controllers: [AppController],
  providers: [AppService],
})

然后将我的fonts文件夹复制到dist目录。这解决了问题。

浏览器无法使用@font-face获取woff字体文件

Browser cannot get woff font file using @font-face

html

css

font-face

woff

woff2