css - 无法在 Chrome 中使用 @font-face 在 Stylus 中定义的类中呈现字体

Question

我有一个前端部分运行 Angular2 的 MEAN 应用程序，具有基于 Stylus 的 CSS 定义。

编译完成后，资源在如下目录树中:

• 分布
• • 后端
• • 前端
• • 资源
• • • font.woff
• • • font.woff2
• • • general.css(显然是编译样式)

general.css 是从general.styl 编译而来的，也就是

@font-face
  font-family: retro-computer
  src: url(font.woff2) format(woff2)
  src: url(font.woff) format(woff)

nav
  border-width: 10px
  border-style: solid
  font-family: retro-computer

这似乎是正确的，因为字体的位置在同一个文件夹中，所以相对 url 很简单。

为了确保字体在整个服务器上可用，在后端的 app.ts 中正确定义了静态路径。

private config() {
  this.app.set("views", path.join(__dirname, "..", "frontend", "views"));
  this.app.set("view engine", "hbs");

  this.app.use("/scripts", express.static(path.join(__dirname, "..", "frontend")));
  this.app.use("/node_modules", express.static(path.join(__dirname, "..", "..", "node_modules"))); 
  this.app.use("/resources/styles", express.static(path.join(__dirname, "..", "resources", "styles"))); //<-- THIS
}

因此，尝试从 http://localhost:8000/resources/styles/font.woff 获取字体工作正常，字体是从浏览器下载的。

生成的CSS也完美的从首页到达，样式包含在Angular2 app中。如果我从样式更改导航的背景颜色、边框大小等，则会显示更改后的样式。

问题是字体。它不会在 Chrome 中呈现(在 Windows Edge 中工作正常，仍未在 FF 中测试)。我究竟做错了什么？我试过在手写笔文件中绕过路径，甚至直接在生成的 CSS 中，但问题仍然存在。

提前致谢。

Answer 1

好的，找到问题了。 Chrome 似乎对 css 中的引号有点挑剔，所以使用 "作为格式就可以了。